From e391f67de9a8a72e7759091037f4e66c22aa7225 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Thu, 5 Dec 2024 15:41:49 +0100 Subject: [PATCH 01/14] feat: update to UI5 Web Components 2.0 --- package.json | 10 +-- packages/base/package.json | 2 +- packages/charts/package.json | 4 +- packages/compat/package.json | 4 +- packages/main/package.json | 8 +- yarn.lock | 160 +++++++++++++++++------------------ 6 files changed, 94 insertions(+), 94 deletions(-) diff --git a/package.json b/package.json index f91e18420cc..e5a54dbfec7 100644 --- a/package.json +++ b/package.json @@ -40,10 +40,10 @@ "@storybook/react": "8.4.5", "@storybook/react-vite": "8.4.5", "@storybook/theming": "8.4.5", - "@ui5/webcomponents": "2.4.0", - "@ui5/webcomponents-compat": "2.4.0", - "@ui5/webcomponents-fiori": "2.4.0", - "@ui5/webcomponents-icons": "2.4.0", + "@ui5/webcomponents": "2.5.0", + "@ui5/webcomponents-compat": "2.5.0", + "@ui5/webcomponents-fiori": "2.5.0", + "@ui5/webcomponents-icons": "2.5.0", "react": "^18.3.1", "react-dom": "^18.3.1", "remark-gfm": "^4.0.0", @@ -65,7 +65,7 @@ "@types/node": "^22.0.0", "@types/react": "^18.3.4", "@types/react-dom": "^18.3.0", - "@ui5/webcomponents-tools": "2.4.0", + "@ui5/webcomponents-tools": "2.5.0", "@vitejs/plugin-react": "^4.2.0", "chromatic": "^11.0.0", "cssnano": "^7.0.0", diff --git a/packages/base/package.json b/packages/base/package.json index 08ad05ee051..0c7b1e36db8 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -31,7 +31,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~2.4.0", + "@ui5/webcomponents-base": "~2.5.0", "react": "^18 || ^19" }, "peerDependenciesMeta": { diff --git a/packages/charts/package.json b/packages/charts/package.json index 2c8f727dd82..c1374b89400 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -39,8 +39,8 @@ "recharts": "2.14.1" }, "peerDependencies": { - "@ui5/webcomponents-react": "~2.4.0", - "@ui5/webcomponents-react-base": "~2.4.0", + "@ui5/webcomponents-react": "~2.5.0", + "@ui5/webcomponents-react-base": "~2.5.0", "react": "^18" }, "publishConfig": { diff --git a/packages/compat/package.json b/packages/compat/package.json index 9fb83d8f2ff..181aab3f82d 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.4.0", - "@ui5/webcomponents-react": "~2.4.0", + "@ui5/webcomponents-compat": "~2.5.0", + "@ui5/webcomponents-react": "~2.5.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/main/package.json b/packages/main/package.json index ee58c242561..839bc8f9d2b 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -57,10 +57,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~2.4.0", - "@ui5/webcomponents-base": "~2.4.0", - "@ui5/webcomponents-fiori": "~2.4.0", - "@ui5/webcomponents-icons": "~2.4.0", + "@ui5/webcomponents": "~2.5.0", + "@ui5/webcomponents-base": "~2.5.0", + "@ui5/webcomponents-fiori": "~2.5.0", + "@ui5/webcomponents-icons": "~2.5.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/yarn.lock b/yarn.lock index 663e84a3654..70447d23dc7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5541,25 +5541,25 @@ __metadata: languageName: node linkType: hard -"@ui5/webcomponents-base@npm:2.4.0": - version: 2.4.0 - resolution: "@ui5/webcomponents-base@npm:2.4.0" +"@ui5/webcomponents-base@npm:2.5.0": + version: 2.5.0 + resolution: "@ui5/webcomponents-base@npm:2.5.0" dependencies: "@lit-labs/ssr-dom-shim": "npm:^1.1.2" lit-html: "npm:^2.0.1" - checksum: 10c0/0e329ea56273ef75eb2ac033a747525d498db35a3d8ed31d2d8ed4b5fc24f0f8167ec1a9de21dfddeeefc5cc5cbb4affc946ee34e481b1657b5db7f30f53b695 + checksum: 10c0/ab1a5f01513894132e8ad0a40cd80a7982cafab3be68049fe15d1984e37743a2b40bab26ff636907686ad249b8adcd8840f3e02ef6f44a5764a1675d8364aafd languageName: node linkType: hard -"@ui5/webcomponents-compat@npm:2.4.0": - version: 2.4.0 - resolution: "@ui5/webcomponents-compat@npm:2.4.0" +"@ui5/webcomponents-compat@npm:2.5.0": + version: 2.5.0 + resolution: "@ui5/webcomponents-compat@npm:2.5.0" dependencies: - "@ui5/webcomponents": "npm:2.4.0" - "@ui5/webcomponents-base": "npm:2.4.0" - "@ui5/webcomponents-icons": "npm:2.4.0" - "@ui5/webcomponents-theming": "npm:2.4.0" - checksum: 10c0/d7a9088f6d366bf41e395b5b5b2b957a31f5e4daf04e368fae5fa31714746ef703b3bf63bfa64235dde7e5d31160265c78d7add94ccb130147f4116004c55e23 + "@ui5/webcomponents": "npm:2.5.0" + "@ui5/webcomponents-base": "npm:2.5.0" + "@ui5/webcomponents-icons": "npm:2.5.0" + "@ui5/webcomponents-theming": "npm:2.5.0" + checksum: 10c0/42ddaba9785c33e1289f1917473669bd98b7dd9ee4cbafb7e439ff8acfbb5b613c2500f9d384d6700f87ba76eb25761ecf813e6179fd5d18825a75c280016e4f languageName: node linkType: hard @@ -5571,53 +5571,53 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-fiori@npm:2.4.0": - version: 2.4.0 - resolution: "@ui5/webcomponents-fiori@npm:2.4.0" +"@ui5/webcomponents-fiori@npm:2.5.0": + version: 2.5.0 + resolution: "@ui5/webcomponents-fiori@npm:2.5.0" dependencies: - "@ui5/webcomponents": "npm:2.4.0" - "@ui5/webcomponents-base": "npm:2.4.0" - "@ui5/webcomponents-icons": "npm:2.4.0" - "@ui5/webcomponents-theming": "npm:2.4.0" - "@zxing/library": "npm:^0.17.1" - checksum: 10c0/78f120f05033569b38e5bf811133e66e67438d36b7055736f41169edbde2a6b4ddaf346bbeaa3504bf39d4c72f092ad66a8e67e87d6ac02a19d5869ce6cae1e7 + "@ui5/webcomponents": "npm:2.5.0" + "@ui5/webcomponents-base": "npm:2.5.0" + "@ui5/webcomponents-icons": "npm:2.5.0" + "@ui5/webcomponents-theming": "npm:2.5.0" + "@zxing/library": "npm:^0.21.3" + checksum: 10c0/05c099b4e9bd57180f47d1a59448de919251cb804c36767b143c3f917316146c74ea594c327414848a13bcfacab450a3782ac34a39f0062a100657087ffa4519 languageName: node linkType: hard -"@ui5/webcomponents-icons-business-suite@npm:2.4.0": - version: 2.4.0 - resolution: "@ui5/webcomponents-icons-business-suite@npm:2.4.0" +"@ui5/webcomponents-icons-business-suite@npm:2.5.0": + version: 2.5.0 + resolution: "@ui5/webcomponents-icons-business-suite@npm:2.5.0" dependencies: - "@ui5/webcomponents-base": "npm:2.4.0" - checksum: 10c0/bf9f048b420ad2ddb3720d48879c9da6e0694db4cfd37d72217846794f8f4ae57a9870a6afa9d52e5767482a22d5eae3e6c662a288ab333fd4a8778a6f26793e + "@ui5/webcomponents-base": "npm:2.5.0" + checksum: 10c0/285a960cd59f963dd52579252d8ef5e40a75f87ff916ec24769d3390422de1b5fc65ce7f2899fbeab0fedafad0b847ccaf451f890f50ac9ea90ef8b595333c9e languageName: node linkType: hard -"@ui5/webcomponents-icons-tnt@npm:2.4.0": - version: 2.4.0 - resolution: "@ui5/webcomponents-icons-tnt@npm:2.4.0" +"@ui5/webcomponents-icons-tnt@npm:2.5.0": + version: 2.5.0 + resolution: "@ui5/webcomponents-icons-tnt@npm:2.5.0" dependencies: - "@ui5/webcomponents-base": "npm:2.4.0" - checksum: 10c0/2a6a90f8d70c52f84f7f6da56c8541bc2560e752ec6e66701f9bf89ea88e41269545c7dc7943f2ed027e9cde8ceaff08de7a087efb2c70cca687f2784415c293 + "@ui5/webcomponents-base": "npm:2.5.0" + checksum: 10c0/71b5e502c0a6ec14716f09e5d0d26f2b041ec5993d0b5258349febd6af309dd30fdbbdd04388d65ac4af0dbbb8d86f85c53dfb1665356916384c102d9b7de763 languageName: node linkType: hard -"@ui5/webcomponents-icons@npm:2.4.0": - version: 2.4.0 - resolution: "@ui5/webcomponents-icons@npm:2.4.0" +"@ui5/webcomponents-icons@npm:2.5.0": + version: 2.5.0 + resolution: "@ui5/webcomponents-icons@npm:2.5.0" dependencies: - "@ui5/webcomponents-base": "npm:2.4.0" - checksum: 10c0/97e83ceed885b032bf7687b8eea58789ff409f5e9029129f28797af13074c450e93f10f947b69aa76167e7ac4ffa8316f19d9feca4f7f17e8adca8099dd74ddf + "@ui5/webcomponents-base": "npm:2.5.0" + checksum: 10c0/6c2e0671ded85734cb21f6a1b99e4f91bf5562d38cd74466a8a92b276a7ebef852e5aaccc45511e810f17371d7cdcaad80f18b0125e17aa02c8a3e88fa5bf668 languageName: node linkType: hard -"@ui5/webcomponents-localization@npm:2.4.0": - version: 2.4.0 - resolution: "@ui5/webcomponents-localization@npm:2.4.0" +"@ui5/webcomponents-localization@npm:2.5.0": + version: 2.5.0 + resolution: "@ui5/webcomponents-localization@npm:2.5.0" dependencies: "@types/openui5": "npm:^1.113.0" - "@ui5/webcomponents-base": "npm:2.4.0" - checksum: 10c0/7f87fa4c66e6b6967c8b45a7ddbb9d3da7cb7122a8bce0a6da750f6540a00bd95a052cb3333490460b01e3989b6bc92a996d7381b788604ff3ab045a4e6a9f34 + "@ui5/webcomponents-base": "npm:2.5.0" + checksum: 10c0/517b2216915bcfacee98c039a8052043b44f98ee59580c7dffc4421acb2a2f0811600cea80b0c9666effeb8beb1f3d25f70fe6ac7562375d98a8d98388c02a19 languageName: node linkType: hard @@ -5626,7 +5626,7 @@ __metadata: resolution: "@ui5/webcomponents-react-base@workspace:packages/base" peerDependencies: "@types/react": "*" - "@ui5/webcomponents-base": ~2.4.0 + "@ui5/webcomponents-base": ~2.5.0 react: ^18 || ^19 peerDependenciesMeta: "@types/react": @@ -5644,8 +5644,8 @@ __metadata: react-content-loader: "npm:7.0.2" recharts: "npm:2.14.1" peerDependencies: - "@ui5/webcomponents-react": ~2.4.0 - "@ui5/webcomponents-react-base": ~2.4.0 + "@ui5/webcomponents-react": ~2.5.0 + "@ui5/webcomponents-react-base": ~2.5.0 react: ^18 languageName: unknown linkType: soft @@ -5668,8 +5668,8 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents-compat": ~2.4.0 - "@ui5/webcomponents-react": ~2.4.0 + "@ui5/webcomponents-compat": ~2.5.0 + "@ui5/webcomponents-react": ~2.5.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5695,10 +5695,10 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents": ~2.4.0 - "@ui5/webcomponents-base": ~2.4.0 - "@ui5/webcomponents-fiori": ~2.4.0 - "@ui5/webcomponents-icons": ~2.4.0 + "@ui5/webcomponents": ~2.5.0 + "@ui5/webcomponents-base": ~2.5.0 + "@ui5/webcomponents-fiori": ~2.5.0 + "@ui5/webcomponents-icons": ~2.5.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5713,19 +5713,19 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-theming@npm:2.4.0": - version: 2.4.0 - resolution: "@ui5/webcomponents-theming@npm:2.4.0" +"@ui5/webcomponents-theming@npm:2.5.0": + version: 2.5.0 + resolution: "@ui5/webcomponents-theming@npm:2.5.0" dependencies: "@sap-theming/theming-base-content": "npm:11.17.1" - "@ui5/webcomponents-base": "npm:2.4.0" - checksum: 10c0/15a1d3cb25a6e6e5287f77ca796a1d4ea8848551952e9b421af945bf345bde1a8a8ef0d19495af3355d6fd7a5cb40d0b922b7b1eb38e32fb173bb18e251dbc30 + "@ui5/webcomponents-base": "npm:2.5.0" + checksum: 10c0/0fd847ac232b0273646a604b9cfcd0411afb7360a4f5785a82162addfbf8d78deab58ee0f16b18456e5453c0b081d019e6152a4497bfbc177a7f77de75aaddb4 languageName: node linkType: hard -"@ui5/webcomponents-tools@npm:2.4.0": - version: 2.4.0 - resolution: "@ui5/webcomponents-tools@npm:2.4.0" +"@ui5/webcomponents-tools@npm:2.5.0": + version: 2.5.0 + resolution: "@ui5/webcomponents-tools@npm:2.5.0" dependencies: "@custom-elements-manifest/analyzer": "npm:^0.8.4" "@typescript-eslint/eslint-plugin": "npm:^6.9.0" @@ -5784,21 +5784,21 @@ __metadata: bin: wc-create-ui5-element: bin/create-ui5-element.js wc-dev: bin/dev.js - checksum: 10c0/65ee722e5f2245ad1b365eab91fae66dcaf31f2588e85fb07635b4394870ff70d0f74a1f07faa5501519f4a24a241b93680ddc66efcc28ff80bffbcc037de4be + checksum: 10c0/4c3726616585eb1023a7d00f1c3525384676121007bd9084be5400e38d1ba40b47f377b36d86614392e3564e1fe66c82c486d9a5e55af66adfd6557243687476 languageName: node linkType: hard -"@ui5/webcomponents@npm:2.4.0": - version: 2.4.0 - resolution: "@ui5/webcomponents@npm:2.4.0" +"@ui5/webcomponents@npm:2.5.0": + version: 2.5.0 + resolution: "@ui5/webcomponents@npm:2.5.0" dependencies: - "@ui5/webcomponents-base": "npm:2.4.0" - "@ui5/webcomponents-icons": "npm:2.4.0" - "@ui5/webcomponents-icons-business-suite": "npm:2.4.0" - "@ui5/webcomponents-icons-tnt": "npm:2.4.0" - "@ui5/webcomponents-localization": "npm:2.4.0" - "@ui5/webcomponents-theming": "npm:2.4.0" - checksum: 10c0/204b047d5b32fb9f707c7d6d4e9c823c9a4a11da537e4e1cfc349e10661dede6717290a6f3a14da5752a5bf59529ae46097f2bc54a128ebb76229563fa4288aa + "@ui5/webcomponents-base": "npm:2.5.0" + "@ui5/webcomponents-icons": "npm:2.5.0" + "@ui5/webcomponents-icons-business-suite": "npm:2.5.0" + "@ui5/webcomponents-icons-tnt": "npm:2.5.0" + "@ui5/webcomponents-localization": "npm:2.5.0" + "@ui5/webcomponents-theming": "npm:2.5.0" + checksum: 10c0/6213e87c215fef64a27d8d2116543a1bc66c836a8745f7da6121ff73387c6c8b5fdd109a2b541d532fbb98e3739383ffaca071049c3f67e8d1a487f52c3f1d51 languageName: node linkType: hard @@ -6070,16 +6070,16 @@ __metadata: languageName: node linkType: hard -"@zxing/library@npm:^0.17.1": - version: 0.17.1 - resolution: "@zxing/library@npm:0.17.1" +"@zxing/library@npm:^0.21.3": + version: 0.21.3 + resolution: "@zxing/library@npm:0.21.3" dependencies: "@zxing/text-encoding": "npm:~0.9.0" - ts-custom-error: "npm:^3.0.0" + ts-custom-error: "npm:^3.2.1" dependenciesMeta: "@zxing/text-encoding": optional: true - checksum: 10c0/fbeb9786a87c48f93e7dc2b8bdb114720cc7a3cf450c7f7c38a32e9a59521edfae54d82b4e7ec43ba0bc30f065b5be0a0fd5acd922fac2288e8a358e3a6745b9 + checksum: 10c0/c6b33998847ad2fda0bce2f07f5b625e33e9dd98f84818ceb976b1193936b69b38ac3120418cca24b38441c711cfd21208b50851967bf8f301567e7f70197268 languageName: node linkType: hard @@ -20401,7 +20401,7 @@ __metadata: languageName: node linkType: hard -"ts-custom-error@npm:^3.0.0": +"ts-custom-error@npm:^3.2.1": version: 3.3.1 resolution: "ts-custom-error@npm:3.3.1" checksum: 10c0/67cc807d03406d7eeb2b908408d455d253cc43b480d669e2e3ea028b9aaa2c78ad1b392425b86368bbbc3c43a15e4abe304312d87ed845091646ec1937bab982 @@ -20873,11 +20873,11 @@ __metadata: "@types/node": "npm:^22.0.0" "@types/react": "npm:^18.3.4" "@types/react-dom": "npm:^18.3.0" - "@ui5/webcomponents": "npm:2.4.0" - "@ui5/webcomponents-compat": "npm:2.4.0" - "@ui5/webcomponents-fiori": "npm:2.4.0" - "@ui5/webcomponents-icons": "npm:2.4.0" - "@ui5/webcomponents-tools": "npm:2.4.0" + "@ui5/webcomponents": "npm:2.5.0" + "@ui5/webcomponents-compat": "npm:2.5.0" + "@ui5/webcomponents-fiori": "npm:2.5.0" + "@ui5/webcomponents-icons": "npm:2.5.0" + "@ui5/webcomponents-tools": "npm:2.5.0" "@vitejs/plugin-react": "npm:^4.2.0" chromatic: "npm:^11.0.0" cssnano: "npm:^7.0.0" From f2dcd5de9fe6190c74e98f937202198854aca767 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Thu, 5 Dec 2024 15:44:05 +0100 Subject: [PATCH 02/14] manifest updates --- .../custom-element-manifests/fiori.json | 1054 ++++++++++++++--- .storybook/custom-element-manifests/main.json | 923 +++++++++++++-- 2 files changed, 1717 insertions(+), 260 deletions(-) diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index e05127b9233..ac292721051 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -5403,7 +5403,25 @@ "description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "dom ref of the activated element" + }, + { + "type": { + "text": "Boolean" + }, + "name": "searchFieldVisible", + "_ui5privacy": "public", + "description": "whether the search field is visible" + } + ] } ], "attributes": [ @@ -5604,7 +5622,17 @@ "description": "Fired, when the item is pressed.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "DOM ref of the clicked element" + } + ] } ], "attributes": [ @@ -5672,12 +5700,12 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user’s current work context\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)", + "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user’s current work context\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is intended for use within an `ui5-navigation-layout` component.\nWhile it can function independently, it is recommended to use it with\nthe `ui5-navigation-layout` for optimal user experience.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)", "name": "SideNavigation", "slots": [ { "name": "default", - "description": "Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\nfor the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested\ninside the items.", + "description": "Defines the main items of the component.", "_ui5propertyName": "items", "_ui5type": { "text": "Array", @@ -5693,7 +5721,7 @@ }, { "name": "fixedItems", - "description": "Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\nfor the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)", + "description": "Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)", "_ui5type": { "text": "Array", "references": [ @@ -7387,17 +7415,6 @@ } ], "events": [ - { - "name": "drop", - "_ui5privacy": "public", - "type": { - "text": "Event" - }, - "description": "Fired when an element is dropped inside the drag and drop overlay.\n\n**Note:** The `drop` event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the `ui5-upload-collection`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - }, { "name": "item-delete", "_ui5privacy": "public", @@ -7411,18 +7428,18 @@ } ] }, - "description": "Fired when the delete button of any item is pressed.", + "description": "Fired when an element is dropped inside the drag and drop overlay.\n\n**Note:** The `drop` event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the `ui5-upload-collection`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5parameters": [ { "type": { - "text": "HTMLElement" + "text": "DataTransfer" }, - "name": "item", + "name": "dataTransfer", "_ui5privacy": "public", - "description": "The `ui5-upload-collection-item` which was deleted." + "description": "The `drop` event operation data." } ] }, @@ -7931,38 +7948,39 @@ }, { "kind": "javascript-module", - "path": "dist/ViewSettingsDialog.js", + "path": "dist/UserMenu.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`", - "name": "ViewSettingsDialog", + "description": "### Overview\n\nThe `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily see information and settings for the current user and all other logged in accounts.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenu.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";` (for `ui5-user-menu-item`)", + "name": "UserMenu", "slots": [ { - "name": "sortItems", - "description": "Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`", + "name": "default", + "description": "Defines the menu items.", + "_ui5propertyName": "menuItems", "_ui5type": { - "text": "Array", + "text": "Array", "references": [ { - "name": "SortItem", + "name": "UserMenuItem", "package": "@ui5/webcomponents-fiori", - "module": "dist/SortItem.js" + "module": "dist/UserMenuItem.js" } ] }, "_ui5privacy": "public" }, { - "name": "filterItems", - "description": "Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`", + "name": "accounts", + "description": "Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`.", "_ui5type": { - "text": "Array", + "text": "Array", "references": [ { - "name": "FilterItem", + "name": "UserMenuAccount", "package": "@ui5/webcomponents-fiori", - "module": "dist/FilterItem.js" + "module": "dist/UserMenuAccount.js" } ] }, @@ -7972,185 +7990,927 @@ "members": [ { "kind": "field", - "name": "sortDescending", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the initial sort order.", + "description": "Defines if the User Menu is opened.", "privacy": "public" }, { "kind": "field", - "name": "open", + "name": "opener", + "type": { + "text": "HTMLElement | string | undefined" + }, + "description": "Defines the ID or DOM Reference of the element at which the user menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "privacy": "public", + "default": "undefined" + }, + { + "kind": "field", + "name": "showManageAccount", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates if the dialog is open.", - "privacy": "public", - "_ui5since": "2.0.0" + "description": "Defines if the User Menu shows the Manage Account option.", + "privacy": "public" }, { - "kind": "method", - "name": "setConfirmedSettings", - "return": { - "type": { - "text": "void" - } + "kind": "field", + "name": "showOtherAccounts", + "type": { + "text": "boolean" }, - "parameters": [ - { - "name": "settings", - "type": { - "text": "VSDSettings", - "references": [ - { - "name": "VSDSettings", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ViewSettingsDialog.js" - } - ] - }, - "description": "predefined settings.", - "_ui5privacy": "public" - } - ], - "description": "Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:", + "default": "false", + "description": "Defines if the User Menu shows the Other Accounts option.", + "privacy": "public" + }, + { + "kind": "field", + "name": "showAddAccount", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the User Menu shows the Add Account option.", "privacy": "public" } ], "events": [ { - "name": "confirm", + "name": "avatar-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent", + "text": "CustomEvent" + }, + "description": "Fired when the account avatar is selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, + { + "name": "manage-account-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the \"Manage Account\" button is selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, + { + "name": "add-account-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the \"Add Account\" button is selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, + { + "name": "change-account", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", "references": [ { - "name": "ViewSettingsDialogConfirmEventDetail", + "name": "UserMenuOtherAccountClickEventDetail", "package": "@ui5/webcomponents-fiori", - "module": "dist/ViewSettingsDialog.js" + "module": "dist/UserMenu.js" } ] }, - "description": "Fired when confirmation button is activated.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "description": "Fired when the account is switched to a different one.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, "_ui5parameters": [ { "type": { - "text": "String" - }, - "name": "sortOrder", - "_ui5privacy": "public", - "description": "The current sort order selected." - }, - { - "type": { - "text": "String" - }, - "name": "sortBy", - "_ui5privacy": "public", - "description": "The currently selected `ui5-sort-item` text attribute." - }, - { - "type": { - "text": "HTMLElement" - }, - "name": "sortByItem", - "_ui5privacy": "public", - "description": "The currently selected `ui5-sort-item`." - }, - { - "type": { - "text": "Boolean" + "text": "UserMenuAccount", + "references": [ + { + "name": "UserMenuAccount", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserMenuAccount.js" + } + ] }, - "name": "sortDescending", + "name": "prevSelectedAccount", "_ui5privacy": "public", - "description": "The selected sort order (true = descending, false = ascending)." + "description": "The previously selected account." }, { "type": { - "text": "Array" + "text": "UserMenuAccount", + "references": [ + { + "name": "UserMenuAccount", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserMenuAccount.js" + } + ] }, - "name": "filters", + "name": "selectedAccount", "_ui5privacy": "public", - "description": "The selected filters items." + "description": "The selected account." } ] }, { - "name": "cancel", + "name": "item-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent", + "text": "CustomEvent", "references": [ { - "name": "ViewSettingsDialogCancelEventDetail", + "name": "UserMenuItemClickEventDetail", "package": "@ui5/webcomponents-fiori", - "module": "dist/ViewSettingsDialog.js" + "module": "dist/UserMenu.js" } ] }, - "description": "Fired when cancel button is activated.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "description": "Fired when a menu item is selected.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, "_ui5parameters": [ { "type": { - "text": "String" - }, - "name": "sortOrder", - "_ui5privacy": "public", - "description": "The current sort order selected." - }, - { - "type": { - "text": "String" - }, - "name": "sortBy", - "_ui5privacy": "public", - "description": "The currently selected `ui5-sort-item` text attribute." - }, - { - "type": { - "text": "HTMLElement" - }, - "name": "sortByItem", - "_ui5privacy": "public", - "description": "The currently selected `ui5-sort-item`." - }, - { - "type": { - "text": "Boolean" - }, - "name": "sortDescending", - "_ui5privacy": "public", - "description": "The selected sort order (true = descending, false = ascending)." - }, - { - "type": { - "text": "Array" + "text": "UserMenuItem", + "references": [ + { + "name": "UserMenuItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserMenuItem.js" + } + ] }, - "name": "filters", + "name": "item", "_ui5privacy": "public", - "description": "The selected filters items." + "description": "The selected `user menu item`." } ] }, { - "name": "before-open", + "name": "sign-out-click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired before the component is opened.", + "description": "Fired when the \"Sign Out\" button is selected.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true + "_ui5Bubbles": false + } + ], + "attributes": [ + { + "description": "Defines if the User Menu is opened.", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the ID or DOM Reference of the element at which the user menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "name": "opener", + "default": "undefined", + "fieldName": "opener", + "type": { + "text": "string | HTMLElement | undefined" + } + }, + { + "description": "Defines if the User Menu shows the Manage Account option.", + "name": "show-manage-account", + "default": "false", + "fieldName": "showManageAccount", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines if the User Menu shows the Other Accounts option.", + "name": "show-other-accounts", + "default": "false", + "fieldName": "showOtherAccounts", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines if the User Menu shows the Add Account option.", + "name": "show-add-account", + "default": "false", + "fieldName": "showAddAccount", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-user-menu", + "customElement": true, + "_ui5experimental": true, + "_ui5since": "2.5.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "UserMenu", + "module": "dist/UserMenu.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-user-menu", + "declaration": { + "name": "UserMenu", + "module": "dist/UserMenu.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/UserMenuAccount.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-user-menu-account` represents an account in the `ui5-user-menu`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenuAccount.js\";`", + "name": "UserMenuAccount", + "members": [ + { + "kind": "field", + "name": "avatarSrc", + "type": { + "text": "string | undefined" + }, + "description": "Defines the avatar image url of the user.", + "default": "\"\"", + "privacy": "public" + }, + { + "kind": "field", + "name": "avatarInitials", + "type": { + "text": "string | undefined" + }, + "description": "Defines the avatar initials of the user.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "titleText", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the title text of the user.", + "privacy": "public" + }, + { + "kind": "field", + "name": "subtitleText", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines additional text of the user.", + "privacy": "public" + }, + { + "kind": "field", + "name": "description", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines description of the user.", + "privacy": "public" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the user is selected.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the avatar image url of the user.", + "name": "avatar-src", + "default": "\"\"", + "fieldName": "avatarSrc", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the avatar initials of the user.", + "name": "avatar-initials", + "default": "undefined", + "fieldName": "avatarInitials", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the title text of the user.", + "name": "title-text", + "default": "\"\"", + "fieldName": "titleText", + "type": { + "text": "string" + } + }, + { + "description": "Defines additional text of the user.", + "name": "subtitle-text", + "default": "\"\"", + "fieldName": "subtitleText", + "type": { + "text": "string" + } + }, + { + "description": "Defines description of the user.", + "name": "description", + "default": "\"\"", + "fieldName": "description", + "type": { + "text": "string" + } + }, + { + "description": "Defines if the user is selected.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-user-menu-account", + "customElement": true, + "_ui5experimental": true, + "_ui5since": "2.5.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "UserMenuAccount", + "module": "dist/UserMenuAccount.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-user-menu-account", + "declaration": { + "name": "UserMenuAccount", + "module": "dist/UserMenuAccount.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/UserMenuItem.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\n`ui5-user-menu-item` is the item to use inside a `ui5-user-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-user-menu-item` represents a node in a `ui5-user-menu`. The user menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a menu item in that menu. Therefore, you should only use\n`ui5-user-menu-item` directly in your apps. The `ui5-menu` menu item is internal for the menu, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";`", + "name": "UserMenuItem", + "slots": [ + { + "name": "default", + "description": "Defines the items of this component.\n\n**Note:** Use `ui5-user-menu-item` for the intended design.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "UserMenuItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserMenuItem.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "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`.", + "_ui5since": "2.0.0", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + }, + { + "name": "deleteButton", + "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", + "_ui5since": "1.9.0", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "superclass": { + "name": "MenuItem", + "package": "@ui5/webcomponents", + "module": "dist/MenuItem.js" + }, + "tagName": "ui5-user-menu-item", + "customElement": true, + "_ui5experimental": true, + "_ui5since": "2.5.0", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the tree item.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "additionalText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\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`.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.8.0" + }, + { + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" + }, + "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether `ui5-menu-item` is in disabled state.\n\n**Note:** A disabled `ui5-menu-item` is noninteractive.", + "privacy": "public" + }, + { + "kind": "field", + "name": "loading", + "type": { + "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.", + "privacy": "public", + "_ui5since": "1.13.0" + }, + { + "kind": "field", + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", + "privacy": "public", + "_ui5since": "1.13.0" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.7.0" + }, + { + "kind": "field", + "name": "tooltip", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the tooltip for the menu item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.23.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] + }, + "default": "{}", + "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\".", + "privacy": "public", + "_ui5since": "2.1.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "kind": "field", + "name": "type", + "type": { + "text": "ListItemType", + "references": [ + { + "name": "ListItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemType.js" + } + ] + }, + "default": "\"Active\"", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "privacy": "public", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "kind": "field", + "name": "navigated", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "kind": "field", + "name": "highlight", + "type": { + "text": "Highlight", + "references": [ + { + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.24", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "description": "Defines the selected state of the component.", + "default": "false", + "privacy": "public", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + } + ], + "events": [ + { + "name": "detail-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "UserMenuItem", + "module": "dist/UserMenuItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-user-menu-item", + "declaration": { + "name": "UserMenuItem", + "module": "dist/UserMenuItem.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ViewSettingsDialog.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`", + "name": "ViewSettingsDialog", + "slots": [ + { + "name": "sortItems", + "description": "Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "SortItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SortItem.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "filterItems", + "description": "Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "FilterItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/FilterItem.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "sortDescending", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the initial sort order.", + "privacy": "public" + }, + { + "kind": "field", + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates if the dialog is open.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "method", + "name": "setConfirmedSettings", + "return": { + "type": { + "text": "void" + } + }, + "parameters": [ + { + "name": "settings", + "type": { + "text": "VSDSettings", + "references": [ + { + "name": "VSDSettings", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ViewSettingsDialog.js" + } + ] + }, + "description": "predefined settings.", + "_ui5privacy": "public" + } + ], + "description": "Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:", + "privacy": "public" + } + ], + "events": [ + { + "name": "confirm", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "ViewSettingsDialogConfirmEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ViewSettingsDialog.js" + } + ] + }, + "description": "Fired when confirmation button is activated.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "String" + }, + "name": "sortOrder", + "_ui5privacy": "public", + "description": "The current sort order selected." + }, + { + "type": { + "text": "String" + }, + "name": "sortBy", + "_ui5privacy": "public", + "description": "The currently selected `ui5-sort-item` text attribute." + }, + { + "type": { + "text": "HTMLElement" + }, + "name": "sortByItem", + "_ui5privacy": "public", + "description": "The currently selected `ui5-sort-item`." + }, + { + "type": { + "text": "Boolean" + }, + "name": "sortDescending", + "_ui5privacy": "public", + "description": "The selected sort order (true = descending, false = ascending)." + }, + { + "type": { + "text": "Array" + }, + "name": "filters", + "_ui5privacy": "public", + "description": "The selected filters items." + } + ] + }, + { + "name": "cancel", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "ViewSettingsDialogCancelEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ViewSettingsDialog.js" + } + ] + }, + "description": "Fired when cancel button is activated.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "String" + }, + "name": "sortOrder", + "_ui5privacy": "public", + "description": "The current sort order selected." + }, + { + "type": { + "text": "String" + }, + "name": "sortBy", + "_ui5privacy": "public", + "description": "The currently selected `ui5-sort-item` text attribute." + }, + { + "type": { + "text": "HTMLElement" + }, + "name": "sortByItem", + "_ui5privacy": "public", + "description": "The currently selected `ui5-sort-item`." + }, + { + "type": { + "text": "Boolean" + }, + "name": "sortDescending", + "_ui5privacy": "public", + "description": "The selected sort order (true = descending, false = ascending)." + }, + { + "type": { + "text": "Array" + }, + "name": "filters", + "_ui5privacy": "public", + "description": "The selected filters items." + } + ] + }, + { + "name": "before-open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired before the component is opened.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false }, { "name": "open", diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index ba936ed7683..e490f3d7621 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -4058,7 +4058,7 @@ "description": "Fired when the component is activated either with a\nclick/tap or by using the Enter or Space key.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "1.0.0-rc.11", "_ui5parameters": [ { @@ -4088,7 +4088,7 @@ "description": "Fired when the count of visible `ui5-avatar` elements in the\ncomponent has changed", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "1.0.0-rc.13" } ], @@ -4172,6 +4172,18 @@ { "description": "Used to style the wrapper of the content of the component", "name": "bar" + }, + { + "description": "Used to style the wrapper of the start content of the component", + "name": "startContent" + }, + { + "description": "Used to style the wrapper of the middle content of the component", + "name": "midContent" + }, + { + "description": "Used to style the wrapper of the end content of the component", + "name": "endContent" } ], "slots": [ @@ -4849,6 +4861,17 @@ "privacy": "public", "_ui5since": "1.2.0" }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" + }, { "kind": "field", "name": "type", @@ -4982,6 +5005,15 @@ "text": "ButtonAccessibilityAttributes" } }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, { "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "name": "type", @@ -6281,7 +6313,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines if the component would be interactive,\ne.g gets hover effect, gets focus outline and `click` event is fired, when pressed.", + "description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.", "privacy": "public" } ], @@ -6327,7 +6359,7 @@ } }, { - "description": "Defines if the component would be interactive,\ne.g gets hover effect, gets focus outline and `click` event is fired, when pressed.", + "description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.", "name": "interactive", "default": "false", "fieldName": "interactive", @@ -7117,7 +7149,7 @@ "description": "Fired when the user selects a color.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "1.0.0-rc.15", "_ui5parameters": [ { @@ -7497,6 +7529,17 @@ "default": "undefined", "privacy": "public", "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "simplified", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.", + "privacy": "public", + "_ui5since": "2.5.0" } ], "events": [ @@ -7530,6 +7573,15 @@ "type": { "text": "string | undefined" } + }, + { + "description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.", + "name": "simplified", + "default": "false", + "fieldName": "simplified", + "type": { + "text": "boolean" + } } ], "superclass": { @@ -8032,14 +8084,13 @@ } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" }, "tagName": "ui5-cb-item", "customElement": true, "_ui5privacy": "public", - "_ui5abstract": true, "_ui5implements": [ { "name": "IComboBoxItem", @@ -8082,16 +8133,76 @@ "description": "Defines the items of the ui5-cb-item-group.", "_ui5propertyName": "items", "_ui5type": { - "text": "Array", + "text": "Array", "references": [ { - "name": "IComboBoxItem", + "name": "ComboBoxItem", "package": "@ui5/webcomponents", - "module": "dist/ComboBox.js" + "module": "dist/ComboBoxItem.js" } ] }, "_ui5privacy": "public" + }, + { + "name": "header", + "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "superclass": { + "name": "ListItemGroup", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + }, + "tagName": "ui5-cb-item-group", + "customElement": true, + "_ui5since": "1.0.0-rc.15", + "_ui5privacy": "public", + "_ui5abstract": true, + "_ui5implements": [ + { + "name": "IComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/ComboBox.js" + } + ], + "attributes": [ + { + "description": "Defines the header text of the ui5-li-group.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + }, + { + "description": "Defines the accessible name of the header.", + "name": "header-accessible-name", + "default": "undefined", + "fieldName": "headerAccessibleName", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ], "members": [ @@ -8101,37 +8212,117 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text of the component.", + "description": "Defines the header text of the ui5-li-group.", + "privacy": "public", "default": "undefined", - "privacy": "public" + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + }, + { + "kind": "field", + "name": "headerAccessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the header.", + "privacy": "public", + "default": "undefined", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ], - "attributes": [ + "events": [ { - "description": "Defines the text of the component.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", + "name": "move-over", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ], + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + }, + { + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ], + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" } } ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-cb-item-group", - "customElement": true, - "_ui5since": "1.0.0-rc.15", - "_ui5privacy": "public", - "_ui5abstract": true, - "_ui5implements": [ + "cssParts": [ { - "name": "IComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/ComboBox.js" + "description": "Used to style the header item of the group", + "name": "header" } ] } @@ -8771,10 +8962,10 @@ "type": { "text": "CustomEvent" }, - "description": "Fired after the value-help dialog of the component is opened.", + "description": "Fired after the component's picker is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "2.4.0" }, { @@ -8783,10 +8974,10 @@ "type": { "text": "CustomEvent" }, - "description": "Fired after the value-help dialog of the component is closed.", + "description": "Fired after the component's picker is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "2.4.0" } ], @@ -9836,10 +10027,10 @@ "type": { "text": "CustomEvent" }, - "description": "Fired after the value-help dialog of the component is opened.", + "description": "Fired after the component's picker is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "2.4.0", "inheritedFrom": { "name": "DatePicker", @@ -9852,10 +10043,10 @@ "type": { "text": "CustomEvent" }, - "description": "Fired after the value-help dialog of the component is closed.", + "description": "Fired after the component's picker is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "2.4.0", "inheritedFrom": { "name": "DatePicker", @@ -10645,10 +10836,10 @@ "type": { "text": "CustomEvent" }, - "description": "Fired after the value-help dialog of the component is opened.", + "description": "Fired after the component's picker is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "2.4.0", "inheritedFrom": { "name": "DatePicker", @@ -10661,10 +10852,10 @@ "type": { "text": "CustomEvent" }, - "description": "Fired after the value-help dialog of the component is closed.", + "description": "Fired after the component's picker is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "2.4.0", "inheritedFrom": { "name": "DatePicker", @@ -10725,7 +10916,7 @@ "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the\n`ui5-dialog` on full screen.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`", + "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`", "name": "Dialog", "cssParts": [ { @@ -10786,7 +10977,7 @@ "text": "boolean" }, "default": "false", - "description": "Determines whether the component should be stretched to fullscreen.\n\n**Note:** The component will be stretched to approximately\n90% of the viewport.", + "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.", "privacy": "public" }, { @@ -10968,7 +11159,7 @@ } }, { - "description": "Determines whether the component should be stretched to fullscreen.\n\n**Note:** The component will be stretched to approximately\n90% of the viewport.", + "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.", "name": "stretch", "default": "false", "fieldName": "stretch", @@ -11113,7 +11304,7 @@ "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "inheritedFrom": { "name": "Popup", "module": "dist/Popup.js" @@ -11128,7 +11319,7 @@ "description": "Fired after the component is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "inheritedFrom": { "name": "Popup", "module": "dist/Popup.js" @@ -11150,7 +11341,7 @@ "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5parameters": [ { "type": { @@ -11175,7 +11366,7 @@ "description": "Fired after the component is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "inheritedFrom": { "name": "Popup", "module": "dist/Popup.js" @@ -11567,7 +11758,7 @@ }, { "kind": "class", - "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";", + "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### Items Empty Span\n\nBy default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:\n- **Label:** occupies 4 cells.\n- **Field:** occupies 8 cells.\n\nThe `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.\n\n**For example:** Setting \"S0 M0 L3 XL3\" (or just \"L3 XL3\") adjusts the layout as follows:\n- **Label:** remains 4 cells.\n- **Field:** is reduced to 5 cells.\n- **Empty space:** 3 cells are added at the end.\n\nGreater values increase the empty space at the end of the form item, reducing the space available for the label and its field.\nHowever, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.\n\n### Navigation flow\n\nThe Form component supports two layout options for keyboard navigation:\n\n#### Simple form\n\nIn this \"simple form\" layout, each `ui5-form-item` acts as a standalone group\nwith one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.\nThis layout is ideal for simpler forms and supports custom arrangements, e.g.,\n\n```\n| 1 | 2 |\n| 3 |\n| 4 | 5 |\n```\n\n#### Complex form\n\nIn this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n ```\n | 1 |\n | 2 |\n | 3 |\n ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n ```\n | 1 | 4 |\n | 2 | 5 |\n | 3 | 6 |\n ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";", "name": "Form", "cssParts": [ { @@ -11627,9 +11818,20 @@ "text": "string" }, "default": "\"S12 M4 L4 XL4\"", - "description": "Defines the width proportion of the labels and fields of a FormItem by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.", + "description": "Defines the width proportion of the labels and fields of a form item by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.", "privacy": "public" }, + { + "kind": "field", + "name": "emptySpan", + "type": { + "text": "string" + }, + "default": "\"S0 M0 L0 XL0\"", + "description": "Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.\n\nBy default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.\nThe `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.\n\n**Note:**\n- The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.\n- When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.", + "privacy": "public", + "_ui5since": "2.5.0" + }, { "kind": "field", "name": "headerText", @@ -11669,7 +11871,7 @@ } }, { - "description": "Defines the width proportion of the labels and fields of a FormItem by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.", + "description": "Defines the width proportion of the labels and fields of a form item by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.", "name": "label-span", "default": "\"S12 M4 L4 XL4\"", "fieldName": "labelSpan", @@ -11677,6 +11879,15 @@ "text": "string" } }, + { + "description": "Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.\n\nBy default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.\nThe `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.\n\n**Note:**\n- The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.\n- When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.", + "name": "empty-span", + "default": "\"S0 M0 L0 XL0\"", + "fieldName": "emptySpan", + "type": { + "text": "string" + } + }, { "description": "Defines the header text of the component.\n\n**Note:** The property gets overridden by the `header` slot.", "name": "header-text", @@ -11962,7 +12173,7 @@ }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n``\n``\n``\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`", + "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n``\n``\n``\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`", "name": "Icon", "cssParts": [ { @@ -12917,6 +13128,17 @@ "privacy": "public", "_ui5since": "1.1.0" }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" + }, { "kind": "field", "name": "icon", @@ -13085,6 +13307,15 @@ "text": "LinkAccessibilityAttributes" } }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, { "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "name": "icon", @@ -13312,11 +13543,33 @@ "type": { "text": "string | undefined" }, - "description": "Defines the IDs of the elements that label the input.", + "description": "Defines the IDs of the elements that label the component.", "default": "undefined", "privacy": "public", "_ui5since": "1.0.0-rc.15" }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Defines the IDs of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" + }, { "kind": "field", "name": "accessibleRole", @@ -13707,7 +13960,7 @@ } }, { - "description": "Defines the IDs of the elements that label the input.", + "description": "Defines the IDs of the elements that label the component.", "name": "accessible-name-ref", "default": "undefined", "fieldName": "accessibleNameRef", @@ -13715,6 +13968,24 @@ "text": "string | undefined" } }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, { "description": "Defines the accessible role of the component.", "name": "accessible-role", @@ -15115,7 +15386,7 @@ "description": "Fired when an item is being clicked.\n\n**Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5parameters": [ { "type": { @@ -15151,7 +15422,7 @@ "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. **This event does not bubble.**\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "1.10.0", "_ui5parameters": [ { @@ -15160,8 +15431,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.", - "_ui5since": "1.14.0" + "description": "The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening." } ] }, @@ -15174,7 +15444,7 @@ "description": "Fired after the menu is opened. **This event does not bubble.**", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "1.10.0" }, { @@ -15193,7 +15463,7 @@ "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. **This event does not bubble.**", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "1.10.0", "_ui5parameters": [ { @@ -15215,7 +15485,7 @@ "description": "Fired after the menu is closed. **This event does not bubble.**", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "1.10.0" } ], @@ -16238,7 +16508,7 @@ "description": "Fired when the dropdown is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "2.0.0" }, { @@ -16538,7 +16808,6 @@ "tagName": "ui5-mcb-item", "customElement": true, "_ui5privacy": "public", - "_ui5abstract": true, "_ui5implements": [ { "name": "IMultiComboBoxItem", @@ -16591,6 +16860,65 @@ ] }, "_ui5privacy": "public" + }, + { + "name": "header", + "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "superclass": { + "name": "ComboBoxItemGroup", + "package": "@ui5/webcomponents", + "module": "dist/ComboBoxItemGroup.js" + }, + "tagName": "ui5-mcb-item-group", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IMultiComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/MultiComboBox.js" + } + ], + "attributes": [ + { + "description": "Defines the header text of the ui5-li-group.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + }, + { + "description": "Defines the accessible name of the header.", + "name": "header-accessible-name", + "default": "undefined", + "fieldName": "headerAccessibleName", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ], "members": [ @@ -16600,37 +16928,117 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text of the component.", + "description": "Defines the header text of the ui5-li-group.", + "privacy": "public", "default": "undefined", - "privacy": "public" + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + }, + { + "kind": "field", + "name": "headerAccessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the header.", + "privacy": "public", + "default": "undefined", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ], - "attributes": [ + "events": [ { - "description": "Defines the text of the component.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", + "name": "move-over", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ], + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + }, + { + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ], + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" } } ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-mcb-item-group", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5abstract": true, - "_ui5implements": [ + "cssParts": [ { - "name": "IMultiComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/MultiComboBox.js" + "description": "Used to style the header item of the group", + "name": "header" } ] } @@ -18404,7 +18812,7 @@ "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "inheritedFrom": { "name": "Popup", "module": "dist/Popup.js" @@ -18419,7 +18827,7 @@ "description": "Fired after the component is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "inheritedFrom": { "name": "Popup", "module": "dist/Popup.js" @@ -18441,7 +18849,7 @@ "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5parameters": [ { "type": { @@ -18466,7 +18874,7 @@ "description": "Fired after the component is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "inheritedFrom": { "name": "Popup", "module": "dist/Popup.js" @@ -18620,7 +19028,7 @@ "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true + "_ui5Bubbles": false }, { "name": "open", @@ -18631,7 +19039,7 @@ "description": "Fired after the component is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": false }, { "name": "before-close", @@ -18649,7 +19057,7 @@ "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5parameters": [ { "type": { @@ -18670,7 +19078,7 @@ "description": "Fired after the component is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": false } ], "attributes": [ @@ -18949,7 +19357,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.", "privacy": "public" }, { @@ -18970,7 +19378,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.", + "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.", "privacy": "public", "_ui5since": "1.0.0-rc.15", "_ui5formProperty": true, @@ -19088,7 +19496,7 @@ } }, { - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.", "name": "readonly", "default": "false", "fieldName": "readonly", @@ -19106,7 +19514,7 @@ } }, { - "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.", + "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.", "name": "checked", "default": "false", "fieldName": "checked", @@ -20338,7 +20746,7 @@ "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "inheritedFrom": { "name": "Popup", "module": "dist/Popup.js" @@ -20353,7 +20761,7 @@ "description": "Fired after the component is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "inheritedFrom": { "name": "Popup", "module": "dist/Popup.js" @@ -20375,7 +20783,7 @@ "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5parameters": [ { "type": { @@ -20400,7 +20808,7 @@ "description": "Fired after the component is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "inheritedFrom": { "name": "Popup", "module": "dist/Popup.js" @@ -20569,8 +20977,7 @@ }, "name": "selectedItems", "_ui5privacy": "public", - "description": "an array of selected items.", - "_ui5since": "1.14.0" + "description": "an array of selected items. Since: 1.14.0" } ] } @@ -21077,7 +21484,7 @@ "description": "Fired after the component's dropdown menu closes.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": false } ], "attributes": [ @@ -24632,6 +25039,16 @@ "description": "Unique identifier of the row.", "privacy": "public" }, + { + "kind": "field", + "name": "position", + "type": { + "text": "number" + }, + "default": "-1", + "description": "Defines the position of the row respect to the total number of rows within the table when the ui5-table-virtualizer feature is used.", + "privacy": "public" + }, { "kind": "field", "name": "interactive", @@ -24663,6 +25080,15 @@ "text": "string" } }, + { + "description": "Defines the position of the row respect to the total number of rows within the table when the ui5-table-virtualizer feature is used.", + "name": "position", + "default": "-1", + "fieldName": "position", + "type": { + "text": "number" + } + }, { "description": "Defines the interactive state of the row.", "name": "interactive", @@ -24851,6 +25277,154 @@ "declarations": [], "exports": [] }, + { + "kind": "javascript-module", + "path": "dist/TableVirtualizer.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-virtualizer` component is used inside the `ui5-table` to virtualize the table rows, if the `overflowMode` property of the table is set to 'Scroll'.\nIt is responsible for rendering only the rows that are visible in the viewport and updating them on scroll.\nThis allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible.\n\n**Note:** The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TableVirtualizer.js\";`", + "name": "TableVirtualizer", + "members": [ + { + "kind": "field", + "name": "rowHeight", + "type": { + "text": "number" + }, + "default": "45", + "description": "Defines the height of the rows in the table.\n\n**Note:** This property is mandatory for the virtualization to work properly.", + "privacy": "public" + }, + { + "kind": "field", + "name": "rowCount", + "type": { + "text": "number" + }, + "default": "100", + "description": "Defines the total count of rows in the table.\n\n**Note:** This property is mandatory for the virtualization to work properly.", + "privacy": "public" + }, + { + "kind": "field", + "name": "extraRows", + "type": { + "text": "number" + }, + "default": "0", + "description": "Defines the count of extra rows to be rendered at the top and bottom of the table.\n\n**Note:** This property is experimental and may be changed or deleted in the future.", + "privacy": "public" + }, + { + "kind": "method", + "name": "reset", + "return": { + "type": { + "text": "void" + } + }, + "description": "Resets the virtualizer to its initial state and triggers the `range-change` event.", + "privacy": "public" + } + ], + "events": [ + { + "name": "range-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "RangeChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TableVirtualizer.js" + } + ] + }, + "description": "Fired when the virtualizer is changed by user interaction e.g. on scrolling.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "number" + }, + "name": "first", + "_ui5privacy": "public", + "description": "The 0-based index of the first children currently rendered" + }, + { + "type": { + "text": "number" + }, + "name": "last", + "_ui5privacy": "public", + "description": "The 0-based index of the last children currently rendered" + } + ] + } + ], + "attributes": [ + { + "description": "Defines the height of the rows in the table.\n\n**Note:** This property is mandatory for the virtualization to work properly.", + "name": "row-height", + "default": "45", + "fieldName": "rowHeight", + "type": { + "text": "number" + } + }, + { + "description": "Defines the total count of rows in the table.\n\n**Note:** This property is mandatory for the virtualization to work properly.", + "name": "row-count", + "default": "100", + "fieldName": "rowCount", + "type": { + "text": "number" + } + }, + { + "description": "Defines the count of extra rows to be rendered at the top and bottom of the table.\n\n**Note:** This property is experimental and may be changed or deleted in the future.", + "name": "extra-rows", + "default": "0", + "fieldName": "extraRows", + "type": { + "text": "number" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-table-virtualizer", + "customElement": true, + "_ui5experimental": "This component is not intended to be used in a productive enviroment. The API is under development and may be changed in the future.", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableVirtualizer", + "module": "dist/TableVirtualizer.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-virtualizer", + "declaration": { + "name": "TableVirtualizer", + "module": "dist/TableVirtualizer.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/Tag.js", @@ -26479,6 +27053,21 @@ "module": "dist/Button.js" } }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } + }, { "kind": "field", "name": "type", @@ -26652,6 +27241,19 @@ "module": "dist/Button.js" } }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } + }, { "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "name": "type", @@ -26881,6 +27483,26 @@ "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", "privacy": "public" }, + { + "kind": "field", + "name": "multiLine", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.", + "privacy": "public" + }, + { + "kind": "field", + "name": "showClearAll", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.", + "privacy": "public" + }, { "kind": "field", "name": "disabled", @@ -26957,7 +27579,24 @@ "description": "Fired when token selection is changed by user interaction", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Array", + "references": [ + { + "name": "Token", + "package": "@ui5/webcomponents", + "module": "dist/Token.js" + } + ] + }, + "name": "tokens", + "_ui5privacy": "public", + "description": "An array of the selected items." + } + ] } ], "attributes": [ @@ -26970,6 +27609,24 @@ "text": "boolean" } }, + { + "description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.", + "name": "multi-line", + "default": "false", + "fieldName": "multiLine", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.", + "name": "show-clear-all", + "default": "false", + "fieldName": "showClearAll", + "type": { + "text": "boolean" + } + }, { "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", "name": "disabled", @@ -27358,8 +28015,8 @@ "text": "CustomEvent" }, "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, "_ui5Bubbles": true } ], @@ -27766,7 +28423,7 @@ "description": "Fired after the component's dropdown menu closes.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": false } ], "attributes": [ @@ -28277,6 +28934,28 @@ "privacy": "public", "_ui5since": "1.8.0" }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Defines the IDs of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" + }, { "kind": "method", "name": "walk", @@ -28548,6 +29227,24 @@ "type": { "text": "string | undefined" } + }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } } ], "superclass": { From 05785ceb886f1fe1717c0501d7aa43d21d6768c0 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Thu, 5 Dec 2024 15:47:11 +0100 Subject: [PATCH 03/14] simple component updates --- .../src/webComponents/AvatarGroup/index.tsx | 4 +- .../main/src/webComponents/Button/index.tsx | 9 +++ .../src/webComponents/CardHeader/index.tsx | 2 +- .../src/webComponents/ColorPalette/index.tsx | 2 +- .../src/webComponents/ColorPicker/index.tsx | 10 ++- .../src/webComponents/ComboBoxItem/index.tsx | 1 - .../webComponents/ComboBoxItemGroup/index.tsx | 59 ++++++++++++-- .../src/webComponents/DatePicker/index.tsx | 8 +- .../webComponents/DateRangePicker/index.tsx | 8 +- .../webComponents/DateTimePicker/index.tsx | 8 +- .../main/src/webComponents/Dialog/index.tsx | 17 ++--- .../main/src/webComponents/Form/index.tsx | 76 ++++++++++++++++++- .../main/src/webComponents/Icon/index.tsx | 2 +- .../main/src/webComponents/Link/index.tsx | 9 +++ .../main/src/webComponents/List/index.tsx | 20 ++++- .../main/src/webComponents/Menu/index.tsx | 10 +-- .../src/webComponents/MultiComboBox/index.tsx | 2 +- .../webComponents/MultiComboBoxItem/index.tsx | 1 - .../MultiComboBoxItemGroup/index.tsx | 60 +++++++++++++-- .../main/src/webComponents/Popover/index.tsx | 8 +- .../src/webComponents/RadioButton/index.tsx | 7 +- .../webComponents/ResponsivePopover/index.tsx | 8 +- .../main/src/webComponents/Select/index.tsx | 2 +- .../webComponents/SideNavigation/index.tsx | 11 +-- .../main/src/webComponents/TableRow/index.tsx | 8 +- .../src/webComponents/ToggleButton/index.tsx | 9 +++ .../src/webComponents/Tokenizer/index.tsx | 18 ++++- .../src/webComponents/ToolbarButton/index.tsx | 4 +- .../src/webComponents/ToolbarSelect/index.tsx | 2 +- .../main/src/webComponents/Tree/index.tsx | 27 ++++++- .../ViewSettingsDialog/index.tsx | 2 +- 31 files changed, 341 insertions(+), 73 deletions(-) diff --git a/packages/main/src/webComponents/AvatarGroup/index.tsx b/packages/main/src/webComponents/AvatarGroup/index.tsx index 3a1ecb732d1..5e105c7bf1b 100644 --- a/packages/main/src/webComponents/AvatarGroup/index.tsx +++ b/packages/main/src/webComponents/AvatarGroup/index.tsx @@ -77,7 +77,7 @@ interface AvatarGroupPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onClick?: (event: Ui5CustomEvent) => void; @@ -87,7 +87,7 @@ interface AvatarGroupPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onOverflow?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Button/index.tsx b/packages/main/src/webComponents/Button/index.tsx index 11ab6f0c0ce..62cefc36762 100644 --- a/packages/main/src/webComponents/Button/index.tsx +++ b/packages/main/src/webComponents/Button/index.tsx @@ -28,6 +28,14 @@ interface ButtonAttributes { */ accessibilityAttributes?: ButtonAccessibilityAttributes; + /** + * Defines the accessible description of the component. + * + * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescription?: string | undefined; + /** * Defines the accessible ARIA name of the component. * @default undefined @@ -170,6 +178,7 @@ const Button = withWebComponent( 'ui5-button', [ 'accessibilityAttributes', + 'accessibleDescription', 'accessibleName', 'accessibleNameRef', 'accessibleRole', diff --git a/packages/main/src/webComponents/CardHeader/index.tsx b/packages/main/src/webComponents/CardHeader/index.tsx index bfa7592f360..0f35be6b280 100644 --- a/packages/main/src/webComponents/CardHeader/index.tsx +++ b/packages/main/src/webComponents/CardHeader/index.tsx @@ -13,7 +13,7 @@ interface CardHeaderAttributes { /** * Defines if the component would be interactive, - * e.g gets hover effect, gets focus outline and `click` event is fired, when pressed. + * e.g gets hover effect and `click` event is fired, when pressed. * @default false */ interactive?: boolean; diff --git a/packages/main/src/webComponents/ColorPalette/index.tsx b/packages/main/src/webComponents/ColorPalette/index.tsx index 73c32e9b8f3..b39f53eae42 100644 --- a/packages/main/src/webComponents/ColorPalette/index.tsx +++ b/packages/main/src/webComponents/ColorPalette/index.tsx @@ -20,7 +20,7 @@ interface ColorPalettePropTypes extends ColorPaletteAttributes, Omit) => void; } diff --git a/packages/main/src/webComponents/ColorPicker/index.tsx b/packages/main/src/webComponents/ColorPicker/index.tsx index 0cb4eb4daf1..66d86eaf458 100644 --- a/packages/main/src/webComponents/ColorPicker/index.tsx +++ b/packages/main/src/webComponents/ColorPicker/index.tsx @@ -15,6 +15,14 @@ interface ColorPickerAttributes { */ name?: string | undefined; + /** + * When set to `true`, the alpha slider and inputs for RGB values will not be displayed. + * + * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**. + * @default false + */ + simplified?: boolean; + /** * Defines the currently selected color of the component. * @@ -60,7 +68,7 @@ interface ColorPickerPropTypes const ColorPicker = withWebComponent( 'ui5-color-picker', ['name', 'value'], - [], + ['simplified'], [], ['change'] ); diff --git a/packages/main/src/webComponents/ComboBoxItem/index.tsx b/packages/main/src/webComponents/ComboBoxItem/index.tsx index 2681d9ab3a8..3a44a04eb34 100644 --- a/packages/main/src/webComponents/ComboBoxItem/index.tsx +++ b/packages/main/src/webComponents/ComboBoxItem/index.tsx @@ -26,7 +26,6 @@ interface ComboBoxItemPropTypes extends ComboBoxItemAttributes, Omit( 'ui5-cb-item', diff --git a/packages/main/src/webComponents/ComboBoxItemGroup/index.tsx b/packages/main/src/webComponents/ComboBoxItemGroup/index.tsx index 71ab8dd8199..27e02edba94 100644 --- a/packages/main/src/webComponents/ComboBoxItemGroup/index.tsx +++ b/packages/main/src/webComponents/ComboBoxItemGroup/index.tsx @@ -1,13 +1,20 @@ 'use client'; import '@ui5/webcomponents/dist/ComboBoxItemGroup.js'; +import type { ListItemGroupMoveEventDetail } from '@ui5/webcomponents/dist/ListItemGroup.js'; import type { ReactNode } from 'react'; import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ComboBoxItemGroupAttributes { /** - * Defines the text of the component. + * Defines the accessible name of the header. + * @default undefined + */ + headerAccessibleName?: string | undefined; + + /** + * Defines the header text of the ui5-li-group. * @default undefined */ headerText?: string | undefined; @@ -17,11 +24,51 @@ interface ComboBoxItemGroupDomRef extends Required, interface ComboBoxItemGroupPropTypes extends ComboBoxItemGroupAttributes, - Omit { + Omit { /** * Defines the items of the ui5-cb-item-group. */ children?: ReactNode | ReactNode[]; + + /** + * Defines the header of the component. + * + * **Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten. + * + * __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="header"`). + * 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). + */ + header?: UI5WCSlotsNode; + /** + * Fired when a movable list item is dropped onto a drop target. + * + * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action. + * + * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onMove?: (event: Ui5CustomEvent) => void; + + /** + * Fired when a movable list item is moved over a potential drop target during a dragging operation. + * + * If the new position is valid, prevent the default action of the event using `preventDefault()`. + * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| + */ + onMoveOver?: (event: Ui5CustomEvent) => void; } /** @@ -33,10 +80,10 @@ interface ComboBoxItemGroupPropTypes */ const ComboBoxItemGroup = withWebComponent( 'ui5-cb-item-group', - ['headerText'], - [], + ['headerAccessibleName', 'headerText'], [], - [] + ['header'], + ['move-over', 'move'] ); ComboBoxItemGroup.displayName = 'ComboBoxItemGroup'; diff --git a/packages/main/src/webComponents/DatePicker/index.tsx b/packages/main/src/webComponents/DatePicker/index.tsx index 860dff789e8..81f9b6f3218 100644 --- a/packages/main/src/webComponents/DatePicker/index.tsx +++ b/packages/main/src/webComponents/DatePicker/index.tsx @@ -201,13 +201,13 @@ interface DatePickerPropTypes onChange?: (event: Ui5CustomEvent) => void; /** - * Fired after the value-help dialog of the component is closed. + * Fired after the component's picker is closed. * * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onClose?: (event: Ui5CustomEvent) => void; @@ -223,13 +223,13 @@ interface DatePickerPropTypes onInput?: (event: Ui5CustomEvent) => void; /** - * Fired after the value-help dialog of the component is opened. + * Fired after the component's picker is opened. * * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onOpen?: (event: Ui5CustomEvent) => void; diff --git a/packages/main/src/webComponents/DateRangePicker/index.tsx b/packages/main/src/webComponents/DateRangePicker/index.tsx index 40162fd755c..40f77ecdbcd 100644 --- a/packages/main/src/webComponents/DateRangePicker/index.tsx +++ b/packages/main/src/webComponents/DateRangePicker/index.tsx @@ -223,13 +223,13 @@ interface DateRangePickerPropTypes onChange?: (event: Ui5CustomEvent) => void; /** - * Fired after the value-help dialog of the component is closed. + * Fired after the component's picker is closed. * * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onClose?: (event: Ui5CustomEvent) => void; @@ -245,13 +245,13 @@ interface DateRangePickerPropTypes onInput?: (event: Ui5CustomEvent) => void; /** - * Fired after the value-help dialog of the component is opened. + * Fired after the component's picker is opened. * * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onOpen?: (event: Ui5CustomEvent) => void; diff --git a/packages/main/src/webComponents/DateTimePicker/index.tsx b/packages/main/src/webComponents/DateTimePicker/index.tsx index b79eb1dca12..c809a4d91ec 100644 --- a/packages/main/src/webComponents/DateTimePicker/index.tsx +++ b/packages/main/src/webComponents/DateTimePicker/index.tsx @@ -201,13 +201,13 @@ interface DateTimePickerPropTypes onChange?: (event: Ui5CustomEvent) => void; /** - * Fired after the value-help dialog of the component is closed. + * Fired after the component's picker is closed. * * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onClose?: (event: Ui5CustomEvent) => void; @@ -223,13 +223,13 @@ interface DateTimePickerPropTypes onInput?: (event: Ui5CustomEvent) => void; /** - * Fired after the value-help dialog of the component is opened. + * Fired after the component's picker is opened. * * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onOpen?: (event: Ui5CustomEvent) => void; diff --git a/packages/main/src/webComponents/Dialog/index.tsx b/packages/main/src/webComponents/Dialog/index.tsx index 6b97f3863d6..f12e2564ff0 100644 --- a/packages/main/src/webComponents/Dialog/index.tsx +++ b/packages/main/src/webComponents/Dialog/index.tsx @@ -106,10 +106,10 @@ interface DialogAttributes { state?: ValueState | keyof typeof ValueState; /** - * Determines whether the component should be stretched to fullscreen. + * Determines if the dialog will be stretched to full screen on mobile. On desktop, + * the dialog will be stretched to approximately 90% of the viewport. * - * **Note:** The component will be stretched to approximately - * 90% of the viewport. + * **Note:** For better usability of the component it is recommended to set this property to "true" when the dialog is opened on phone. * @default false */ stretch?: boolean; @@ -177,7 +177,7 @@ interface DialogPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ✅|✅| + * | ✅|❌| */ onBeforeClose?: (event: Ui5CustomEvent) => void; @@ -188,7 +188,7 @@ interface DialogPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ✅|✅| + * | ✅|❌| */ onBeforeOpen?: (event: Ui5CustomEvent) => void; @@ -197,7 +197,7 @@ interface DialogPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onClose?: (event: Ui5CustomEvent) => void; @@ -206,7 +206,7 @@ interface DialogPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onOpen?: (event: Ui5CustomEvent) => void; } @@ -231,8 +231,7 @@ interface DialogPropTypes * * * ### Responsive Behavior - * The `stretch` property can be used to stretch the - * `Dialog` on full screen. + * The `stretch` property can be used to stretch the `Dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices. * * **Note:** When a `Bar` is used in the header or in the footer, you should remove the default dialog's paddings. * diff --git a/packages/main/src/webComponents/Form/index.tsx b/packages/main/src/webComponents/Form/index.tsx index f481289812c..f6fa5b0408f 100644 --- a/packages/main/src/webComponents/Form/index.tsx +++ b/packages/main/src/webComponents/Form/index.tsx @@ -7,6 +7,21 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface FormAttributes { + /** + * Defines the number of cells that are empty at the end of each form item, configurable by breakpoint. + * + * By default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end. + * The `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end. + * + * **Note:** + * - The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field. + * - When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field. + * + * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**. + * @default "S0 M0 L0 XL0" + */ + emptySpan?: string; + /** * Defines the header text of the component. * @@ -26,7 +41,7 @@ interface FormAttributes { itemSpacing?: FormItemSpacing | keyof typeof FormItemSpacing; /** - * Defines the width proportion of the labels and fields of a FormItem by breakpoint. + * Defines the width proportion of the labels and fields of a form item by breakpoint. * * By default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes, * and 12/12 in S size, e.g in S the label is on top of its associated field. @@ -147,6 +162,63 @@ interface FormPropTypes extends FormAttributes, Omit( 'ui5-form', - ['headerText', 'itemSpacing', 'labelSpan', 'layout'], + ['emptySpan', 'headerText', 'itemSpacing', 'labelSpan', 'layout'], [], ['header'], [] diff --git a/packages/main/src/webComponents/Icon/index.tsx b/packages/main/src/webComponents/Icon/index.tsx index 1bd8c9bed7a..01e0ed45635 100644 --- a/packages/main/src/webComponents/Icon/index.tsx +++ b/packages/main/src/webComponents/Icon/index.tsx @@ -90,7 +90,7 @@ interface IconPropTypes extends IconAttributes, Omit( 'ui5-link', [ 'accessibilityAttributes', + 'accessibleDescription', 'accessibleName', 'accessibleNameRef', 'accessibleRole', diff --git a/packages/main/src/webComponents/List/index.tsx b/packages/main/src/webComponents/List/index.tsx index f9a12f51c91..97db0ce8740 100644 --- a/packages/main/src/webComponents/List/index.tsx +++ b/packages/main/src/webComponents/List/index.tsx @@ -19,6 +19,22 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ListAttributes { + /** + * Defines the accessible description of the component. + * + * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescription?: string | undefined; + + /** + * Defines the IDs of the elements that describe the component. + * + * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescriptionRef?: string | undefined; + /** * Defines the accessible name of the component. * @default undefined @@ -26,7 +42,7 @@ interface ListAttributes { accessibleName?: string | undefined; /** - * Defines the IDs of the elements that label the input. + * Defines the IDs of the elements that label the component. * @default undefined */ accessibleNameRef?: string | undefined; @@ -303,6 +319,8 @@ interface ListPropTypes const List = withWebComponent( 'ui5-list', [ + 'accessibleDescription', + 'accessibleDescriptionRef', 'accessibleName', 'accessibleNameRef', 'accessibleRole', diff --git a/packages/main/src/webComponents/Menu/index.tsx b/packages/main/src/webComponents/Menu/index.tsx index 7ff11c081a9..6c5ef66ecbb 100644 --- a/packages/main/src/webComponents/Menu/index.tsx +++ b/packages/main/src/webComponents/Menu/index.tsx @@ -73,7 +73,7 @@ interface MenuPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onBeforeClose?: (event: Ui5CustomEvent) => void; @@ -86,7 +86,7 @@ interface MenuPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onBeforeOpen?: (event: Ui5CustomEvent) => void; @@ -97,7 +97,7 @@ interface MenuPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onClose?: (event: Ui5CustomEvent) => void; @@ -108,7 +108,7 @@ interface MenuPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onItemClick?: (event: Ui5CustomEvent) => void; @@ -119,7 +119,7 @@ interface MenuPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onOpen?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/MultiComboBox/index.tsx b/packages/main/src/webComponents/MultiComboBox/index.tsx index 4e23880bdea..5eaa2fd8e24 100644 --- a/packages/main/src/webComponents/MultiComboBox/index.tsx +++ b/packages/main/src/webComponents/MultiComboBox/index.tsx @@ -184,7 +184,7 @@ interface MultiComboBoxPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onClose?: (event: Ui5CustomEvent) => void; diff --git a/packages/main/src/webComponents/MultiComboBoxItem/index.tsx b/packages/main/src/webComponents/MultiComboBoxItem/index.tsx index 578ea25ab73..750a6a28c82 100644 --- a/packages/main/src/webComponents/MultiComboBoxItem/index.tsx +++ b/packages/main/src/webComponents/MultiComboBoxItem/index.tsx @@ -34,7 +34,6 @@ interface MultiComboBoxItemPropTypes * The `MultiComboBoxItem` represents the item for a `MultiComboBox`. * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) - * @abstract */ const MultiComboBoxItem = withWebComponent( 'ui5-mcb-item', diff --git a/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx b/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx index 47217231b62..539522627b6 100644 --- a/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx +++ b/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx @@ -1,13 +1,20 @@ 'use client'; import '@ui5/webcomponents/dist/MultiComboBoxItemGroup.js'; +import type { ListItemGroupMoveEventDetail } from '@ui5/webcomponents/dist/ListItemGroup.js'; import type { ReactNode } from 'react'; import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface MultiComboBoxItemGroupAttributes { /** - * Defines the text of the component. + * Defines the accessible name of the header. + * @default undefined + */ + headerAccessibleName?: string | undefined; + + /** + * Defines the header text of the ui5-li-group. * @default undefined */ headerText?: string | undefined; @@ -17,11 +24,51 @@ interface MultiComboBoxItemGroupDomRef extends Required { + Omit { /** * Defines the items of the ui5-mcb-item-group. */ children?: ReactNode | ReactNode[]; + + /** + * Defines the header of the component. + * + * **Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten. + * + * __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="header"`). + * 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). + */ + header?: UI5WCSlotsNode; + /** + * Fired when a movable list item is dropped onto a drop target. + * + * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action. + * + * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onMove?: (event: Ui5CustomEvent) => void; + + /** + * Fired when a movable list item is moved over a potential drop target during a dragging operation. + * + * If the new position is valid, prevent the default action of the event using `preventDefault()`. + * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| + */ + onMoveOver?: (event: Ui5CustomEvent) => void; } /** @@ -31,14 +78,13 @@ interface MultiComboBoxItemGroupPropTypes * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) * * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__. - * @abstract */ const MultiComboBoxItemGroup = withWebComponent( 'ui5-mcb-item-group', - ['headerText'], - [], + ['headerAccessibleName', 'headerText'], [], - [] + ['header'], + ['move-over', 'move'] ); MultiComboBoxItemGroup.displayName = 'MultiComboBoxItemGroup'; diff --git a/packages/main/src/webComponents/Popover/index.tsx b/packages/main/src/webComponents/Popover/index.tsx index a2ff7ee770f..cc79e5eaeb6 100644 --- a/packages/main/src/webComponents/Popover/index.tsx +++ b/packages/main/src/webComponents/Popover/index.tsx @@ -178,7 +178,7 @@ interface PopoverPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ✅|✅| + * | ✅|❌| */ onBeforeClose?: (event: Ui5CustomEvent) => void; @@ -189,7 +189,7 @@ interface PopoverPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ✅|✅| + * | ✅|❌| */ onBeforeOpen?: (event: Ui5CustomEvent) => void; @@ -198,7 +198,7 @@ interface PopoverPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onClose?: (event: Ui5CustomEvent) => void; @@ -207,7 +207,7 @@ interface PopoverPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onOpen?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/RadioButton/index.tsx b/packages/main/src/webComponents/RadioButton/index.tsx index a71843632fc..e1467b4c64d 100644 --- a/packages/main/src/webComponents/RadioButton/index.tsx +++ b/packages/main/src/webComponents/RadioButton/index.tsx @@ -29,6 +29,9 @@ interface RadioButtonAttributes { * **Note:** The property value can be changed with user interaction, * either by clicking/tapping on the component, * or by using the Space or Enter key. + * + * **Note:** Only enabled radio buttons can be checked. + * Read-only radio buttons are not selectable, and therefore are always unchecked. * @default false */ checked?: boolean; @@ -58,8 +61,8 @@ interface RadioButtonAttributes { /** * Defines whether the component is read-only. * - * **Note:** A read-only component is not editable, - * but still provides visual feedback upon user interaction. + * **Note:** A read-only component isn't editable or selectable. + * However, because it's focusable, it still provides visual feedback upon user interaction. * @default false */ readonly?: boolean; diff --git a/packages/main/src/webComponents/ResponsivePopover/index.tsx b/packages/main/src/webComponents/ResponsivePopover/index.tsx index d0392e4cebf..298ae151d71 100644 --- a/packages/main/src/webComponents/ResponsivePopover/index.tsx +++ b/packages/main/src/webComponents/ResponsivePopover/index.tsx @@ -178,7 +178,7 @@ interface ResponsivePopoverPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ✅|✅| + * | ✅|❌| */ onBeforeClose?: (event: Ui5CustomEvent) => void; @@ -189,7 +189,7 @@ interface ResponsivePopoverPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ✅|✅| + * | ✅|❌| */ onBeforeOpen?: (event: Ui5CustomEvent) => void; @@ -198,7 +198,7 @@ interface ResponsivePopoverPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onClose?: (event: Ui5CustomEvent) => void; @@ -207,7 +207,7 @@ interface ResponsivePopoverPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onOpen?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Select/index.tsx b/packages/main/src/webComponents/Select/index.tsx index 72885bc6dc0..175d371a003 100644 --- a/packages/main/src/webComponents/Select/index.tsx +++ b/packages/main/src/webComponents/Select/index.tsx @@ -158,7 +158,7 @@ interface SelectPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onClose?: (event: Ui5CustomEvent) => void; diff --git a/packages/main/src/webComponents/SideNavigation/index.tsx b/packages/main/src/webComponents/SideNavigation/index.tsx index 9fc5e30e947..74bea61e08e 100644 --- a/packages/main/src/webComponents/SideNavigation/index.tsx +++ b/packages/main/src/webComponents/SideNavigation/index.tsx @@ -20,15 +20,12 @@ interface SideNavigationPropTypes extends SideNavigationAttributes, Omit { /** - * Defines the main items of the `SideNavigation`. Use the `SideNavigationItem` component - * for the top-level items, and the `SideNavigationSubItem` component for second-level items, nested - * inside the items. + * Defines the main items of the component. */ children?: ReactNode | ReactNode[]; /** - * Defines the fixed items at the bottom of the `SideNavigation`. Use the `SideNavigationItem` component - * for the fixed items, and optionally the `SideNavigationSubItem` component to provide second-level items inside them. + * Defines the fixed items at the bottom of the component. * * **Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items) * @@ -79,6 +76,10 @@ interface SideNavigationPropTypes * The items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level. * You must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level. * + * The `SideNavigation` component is intended for use within an `NavigationLayout` component. + * While it can function independently, it is recommended to use it with + * the `NavigationLayout` for optimal user experience. + * * ### Keyboard Handling * * ### Fast Navigation diff --git a/packages/main/src/webComponents/TableRow/index.tsx b/packages/main/src/webComponents/TableRow/index.tsx index f52f6534382..485f23e979c 100644 --- a/packages/main/src/webComponents/TableRow/index.tsx +++ b/packages/main/src/webComponents/TableRow/index.tsx @@ -18,6 +18,12 @@ interface TableRowAttributes { */ navigated?: boolean; + /** + * Defines the position of the row respect to the total number of rows within the table when the ui5-table-virtualizer feature is used. + * @default -1 + */ + position?: number; + /** * Unique identifier of the row. */ @@ -47,7 +53,7 @@ interface TableRowPropTypes extends TableRowAttributes, Omit( 'ui5-table-row', - ['rowKey'], + ['position', 'rowKey'], ['interactive', 'navigated'], [], [] diff --git a/packages/main/src/webComponents/ToggleButton/index.tsx b/packages/main/src/webComponents/ToggleButton/index.tsx index a23cf27de77..73a1e90a0a8 100644 --- a/packages/main/src/webComponents/ToggleButton/index.tsx +++ b/packages/main/src/webComponents/ToggleButton/index.tsx @@ -28,6 +28,14 @@ interface ToggleButtonAttributes { */ accessibilityAttributes?: ButtonAccessibilityAttributes; + /** + * Defines the accessible description of the component. + * + * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescription?: string | undefined; + /** * Defines the accessible ARIA name of the component. * @default undefined @@ -170,6 +178,7 @@ const ToggleButton = withWebComponent 'ui5-toggle-button', [ 'accessibilityAttributes', + 'accessibleDescription', 'accessibleName', 'accessibleNameRef', 'accessibleRole', diff --git a/packages/main/src/webComponents/Tokenizer/index.tsx b/packages/main/src/webComponents/Tokenizer/index.tsx index 00064ddcf73..63dd5581a7b 100644 --- a/packages/main/src/webComponents/Tokenizer/index.tsx +++ b/packages/main/src/webComponents/Tokenizer/index.tsx @@ -29,6 +29,14 @@ interface TokenizerAttributes { */ disabled?: boolean; + /** + * Defines whether tokens are displayed on multiple lines. + * + * **Note:** The `multiLine` property is in an experimental state and is a subject to change. + * @default false + */ + multiLine?: boolean; + /** * Defines whether the component is read-only. * @@ -37,6 +45,14 @@ interface TokenizerAttributes { * @default false */ readonly?: boolean; + + /** + * Defines whether "Clear All" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect. + * + * **Note:** The `showClearAll` property is in an experimental state and is a subject to change. + * @default false + */ + showClearAll?: boolean; } interface TokenizerDomRef extends Required, Ui5DomRef {} @@ -97,7 +113,7 @@ interface TokenizerPropTypes const Tokenizer = withWebComponent( 'ui5-tokenizer', ['accessibleName', 'accessibleNameRef'], - ['disabled', 'readonly'], + ['disabled', 'multiLine', 'readonly', 'showClearAll'], [], ['selection-change', 'token-delete'] ); diff --git a/packages/main/src/webComponents/ToolbarButton/index.tsx b/packages/main/src/webComponents/ToolbarButton/index.tsx index 60748836c70..d99940ef027 100644 --- a/packages/main/src/webComponents/ToolbarButton/index.tsx +++ b/packages/main/src/webComponents/ToolbarButton/index.tsx @@ -123,9 +123,11 @@ interface ToolbarButtonPropTypes * **Note:** The event will not be fired if the `disabled` * property is set to `true`. * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ✅|✅| */ onClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/ToolbarSelect/index.tsx b/packages/main/src/webComponents/ToolbarSelect/index.tsx index 3f1700cabdb..5d79bc560d8 100644 --- a/packages/main/src/webComponents/ToolbarSelect/index.tsx +++ b/packages/main/src/webComponents/ToolbarSelect/index.tsx @@ -88,7 +88,7 @@ interface ToolbarSelectPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onClose?: (event: Ui5CustomEvent) => void; diff --git a/packages/main/src/webComponents/Tree/index.tsx b/packages/main/src/webComponents/Tree/index.tsx index d5f861cd028..c2a12069853 100644 --- a/packages/main/src/webComponents/Tree/index.tsx +++ b/packages/main/src/webComponents/Tree/index.tsx @@ -16,6 +16,22 @@ import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface TreeAttributes { + /** + * Defines the accessible description of the component. + * + * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescription?: string | undefined; + + /** + * Defines the IDs of the elements that describe the component. + * + * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescriptionRef?: string | undefined; + /** * Defines the accessible name of the component. * @@ -209,7 +225,16 @@ interface TreePropTypes */ const Tree = withWebComponent( 'ui5-tree', - ['accessibleName', 'accessibleNameRef', 'footerText', 'headerText', 'noDataText', 'selectionMode'], + [ + 'accessibleDescription', + 'accessibleDescriptionRef', + 'accessibleName', + 'accessibleNameRef', + 'footerText', + 'headerText', + 'noDataText', + 'selectionMode' + ], [], ['header'], ['item-click', 'item-delete', 'item-mouseout', 'item-mouseover', 'item-toggle', 'selection-change'] diff --git a/packages/main/src/webComponents/ViewSettingsDialog/index.tsx b/packages/main/src/webComponents/ViewSettingsDialog/index.tsx index 9c133dfdd97..47bb7d991c5 100644 --- a/packages/main/src/webComponents/ViewSettingsDialog/index.tsx +++ b/packages/main/src/webComponents/ViewSettingsDialog/index.tsx @@ -84,7 +84,7 @@ interface ViewSettingsDialogPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ✅|✅| + * | ✅|❌| */ onBeforeOpen?: (event: Ui5CustomEvent) => void; From c4fe98bca262c7bd0eff2e7986def8d15bc280dc Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Thu, 5 Dec 2024 15:52:25 +0100 Subject: [PATCH 04/14] add version info and export new components --- config/version-info.json | 3 +- .../webComponents/TableVirtualizer/index.tsx | 78 ++++++ .../main/src/webComponents/UserMenu/index.tsx | 165 +++++++++++++ .../webComponents/UserMenuAccount/index.tsx | 68 ++++++ .../src/webComponents/UserMenuItem/index.tsx | 229 ++++++++++++++++++ packages/main/src/webComponents/index.ts | 4 + 6 files changed, 546 insertions(+), 1 deletion(-) create mode 100644 packages/main/src/webComponents/TableVirtualizer/index.tsx create mode 100644 packages/main/src/webComponents/UserMenu/index.tsx create mode 100644 packages/main/src/webComponents/UserMenuAccount/index.tsx create mode 100644 packages/main/src/webComponents/UserMenuItem/index.tsx diff --git a/config/version-info.json b/config/version-info.json index 5c64dc4ac01..da175148cb9 100644 --- a/config/version-info.json +++ b/config/version-info.json @@ -46,5 +46,6 @@ "2.1.2": "2.0.0", "2.2.0": "2.1.0", "2.3.0": "2.2.0", - "2.4.0": "2.4.0" + "2.4.0": "2.4.0", + "2.5.0": "2.5.0" } diff --git a/packages/main/src/webComponents/TableVirtualizer/index.tsx b/packages/main/src/webComponents/TableVirtualizer/index.tsx new file mode 100644 index 00000000000..df94ae8d2a2 --- /dev/null +++ b/packages/main/src/webComponents/TableVirtualizer/index.tsx @@ -0,0 +1,78 @@ +'use client'; + +import '@ui5/webcomponents/dist/TableVirtualizer.js'; +import type { RangeChangeEventDetail } from '@ui5/webcomponents/dist/TableVirtualizer.js'; +import { withWebComponent } from '../../internal/withWebComponent.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; + +interface TableVirtualizerAttributes { + /** + * Defines the count of extra rows to be rendered at the top and bottom of the table. + * + * **Note:** This property is experimental and may be changed or deleted in the future. + * @default 0 + */ + extraRows?: number; + + /** + * Defines the total count of rows in the table. + * + * **Note:** This property is mandatory for the virtualization to work properly. + * @default 100 + */ + rowCount?: number; + + /** + * Defines the height of the rows in the table. + * + * **Note:** This property is mandatory for the virtualization to work properly. + * @default 45 + */ + rowHeight?: number; +} + +interface TableVirtualizerDomRef extends Required, Ui5DomRef { + /** + * Resets the virtualizer to its initial state and triggers the `range-change` event. + * @returns {void} + */ + reset: () => void; +} + +interface TableVirtualizerPropTypes + extends TableVirtualizerAttributes, + Omit { + /** + * Fired when the virtualizer is changed by user interaction e.g. on scrolling. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onRangeChange?: (event: Ui5CustomEvent) => void; +} + +/** + * The `TableVirtualizer` component is used inside the `Table` to virtualize the table rows, if the `overflowMode` property of the table is set to 'Scroll'. + * It is responsible for rendering only the rows that are visible in the viewport and updating them on scroll. + * This allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible. + * + * **Note:** The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element. + * + * + * + * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * @experimental This component is not intended to be used in a productive enviroment. The API is under development and may be changed in the future. + */ +const TableVirtualizer = withWebComponent( + 'ui5-table-virtualizer', + ['extraRows', 'rowCount', 'rowHeight'], + [], + [], + ['range-change'] +); + +TableVirtualizer.displayName = 'TableVirtualizer'; + +export { TableVirtualizer }; +export type { TableVirtualizerDomRef, TableVirtualizerPropTypes }; diff --git a/packages/main/src/webComponents/UserMenu/index.tsx b/packages/main/src/webComponents/UserMenu/index.tsx new file mode 100644 index 00000000000..42efc1ec09e --- /dev/null +++ b/packages/main/src/webComponents/UserMenu/index.tsx @@ -0,0 +1,165 @@ +'use client'; + +import '@ui5/webcomponents-fiori/dist/UserMenu.js'; +import type { + UserMenuItemClickEventDetail, + UserMenuOtherAccountClickEventDetail +} from '@ui5/webcomponents-fiori/dist/UserMenu.js'; +import type { ReactNode } from 'react'; +import { withWebComponent } from '../../internal/withWebComponent.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; + +interface UserMenuAttributes { + /** + * Defines if the User Menu is opened. + * @default false + */ + open?: boolean; + + /** + * Defines the ID or DOM Reference of the element at which the user menu is shown. + * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover. + * You can only set the `opener` attribute to a DOM Reference when using JavaScript. + * @default undefined + */ + opener?: HTMLElement | string | undefined; + + /** + * Defines if the User Menu shows the Add Account option. + * @default false + */ + showAddAccount?: boolean; + + /** + * Defines if the User Menu shows the Manage Account option. + * @default false + */ + showManageAccount?: boolean; + + /** + * Defines if the User Menu shows the Other Accounts option. + * @default false + */ + showOtherAccounts?: boolean; +} + +interface UserMenuDomRef extends Required, Ui5DomRef {} + +interface UserMenuPropTypes + extends UserMenuAttributes, + Omit< + CommonProps, + | keyof UserMenuAttributes + | 'accounts' + | 'children' + | 'onAddAccountClick' + | 'onAvatarClick' + | 'onChangeAccount' + | 'onItemClick' + | 'onManageAccountClick' + | 'onSignOutClick' + > { + /** + * Defines the user accounts. + * + * **Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless + * there is an item with `selected` property set to `true`. + * + * __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="accounts"`). + * 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). + */ + accounts?: UI5WCSlotsNode; + + /** + * Defines the menu items. + */ + children?: ReactNode | ReactNode[]; + /** + * Fired when the "Add Account" button is selected. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onAddAccountClick?: (event: Ui5CustomEvent) => void; + + /** + * Fired when the account avatar is selected. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onAvatarClick?: (event: Ui5CustomEvent) => void; + + /** + * Fired when the account is switched to a different one. + * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|❌| + */ + onChangeAccount?: (event: Ui5CustomEvent) => void; + + /** + * Fired when a menu item is selected. + * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|❌| + */ + onItemClick?: (event: Ui5CustomEvent) => void; + + /** + * Fired when the "Manage Account" button is selected. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onManageAccountClick?: (event: Ui5CustomEvent) => void; + + /** + * Fired when the "Sign Out" button is selected. + * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|❌| + */ + onSignOutClick?: (event: Ui5CustomEvent) => void; +} + +/** + * The `UserMenu` is an SAP Fiori specific web component that is used in `ShellBar` + * and allows the user to easily see information and settings for the current user and all other logged in accounts. + * + * + * + * `import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";` (for `UserMenuItem`) + * + * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * + * @since [2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of __@ui5/webcomponents-fiori__. + * @experimental + */ +const UserMenu = withWebComponent( + 'ui5-user-menu', + ['opener'], + ['open', 'showAddAccount', 'showManageAccount', 'showOtherAccounts'], + ['accounts'], + ['add-account-click', 'avatar-click', 'change-account', 'item-click', 'manage-account-click', 'sign-out-click'] +); + +UserMenu.displayName = 'UserMenu'; + +export { UserMenu }; +export type { UserMenuDomRef, UserMenuPropTypes }; diff --git a/packages/main/src/webComponents/UserMenuAccount/index.tsx b/packages/main/src/webComponents/UserMenuAccount/index.tsx new file mode 100644 index 00000000000..24e24d9245e --- /dev/null +++ b/packages/main/src/webComponents/UserMenuAccount/index.tsx @@ -0,0 +1,68 @@ +'use client'; + +import '@ui5/webcomponents-fiori/dist/UserMenuAccount.js'; +import { withWebComponent } from '../../internal/withWebComponent.js'; +import type { CommonProps, Ui5DomRef } from '../../types/index.js'; + +interface UserMenuAccountAttributes { + /** + * Defines the avatar initials of the user. + * @default undefined + */ + avatarInitials?: string | undefined; + + /** + * Defines the avatar image url of the user. + */ + avatarSrc?: string | undefined; + + /** + * Defines description of the user. + */ + description?: string; + + /** + * Defines if the user is selected. + * @default false + */ + selected?: boolean; + + /** + * Defines additional text of the user. + */ + subtitleText?: string; + + /** + * Defines the title text of the user. + */ + titleText?: string; +} + +interface UserMenuAccountDomRef extends Required, Ui5DomRef {} + +interface UserMenuAccountPropTypes + extends UserMenuAccountAttributes, + Omit {} + +/** + * The `UserMenuAccount` represents an account in the `UserMenu`. + * + * + * + * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * + * @since [2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of __@ui5/webcomponents-fiori__. + * @experimental + */ +const UserMenuAccount = withWebComponent( + 'ui5-user-menu-account', + ['avatarInitials', 'avatarSrc', 'description', 'subtitleText', 'titleText'], + ['selected'], + [], + [] +); + +UserMenuAccount.displayName = 'UserMenuAccount'; + +export { UserMenuAccount }; +export type { UserMenuAccountDomRef, UserMenuAccountPropTypes }; diff --git a/packages/main/src/webComponents/UserMenuItem/index.tsx b/packages/main/src/webComponents/UserMenuItem/index.tsx new file mode 100644 index 00000000000..98656add2be --- /dev/null +++ b/packages/main/src/webComponents/UserMenuItem/index.tsx @@ -0,0 +1,229 @@ +'use client'; + +import '@ui5/webcomponents-fiori/dist/UserMenuItem.js'; +import type { ListItemAccessibilityAttributes } from '@ui5/webcomponents/dist/ListItem.js'; +import type Highlight from '@ui5/webcomponents/dist/types/Highlight.js'; +import type ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; +import type { ReactNode } from 'react'; +import { withWebComponent } from '../../internal/withWebComponent.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; + +interface UserMenuItemAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * The following fields are supported: + * + * - **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item. + * + * - **role**: Defines the role of the menu item. If not set, menu item will have default role="menuitem". + * + * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents-fiori**. + * @default {} + */ + accessibilityAttributes?: ListItemAccessibilityAttributes; + + /** + * Defines the accessible ARIA name of the component. + * + * **Note:** Available since [v1.7.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.7.0) of **@ui5/webcomponents-fiori**. + * @default undefined + */ + accessibleName?: string | undefined; + + /** + * Defines the `additionalText`, displayed in the end of the menu item. + * + * **Note:** The additional text will not be displayed if there are items added in `items` slot or there are + * components added to `endContent` slot. + * + * 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`. + * + * **Note:** Available since [v1.8.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.8.0) of **@ui5/webcomponents-fiori**. + * @default undefined + */ + additionalText?: string | undefined; + + /** + * Defines whether `ui5-menu-item` is in disabled state. + * + * **Note:** A disabled `ui5-menu-item` is noninteractive. + * @default false + */ + disabled?: boolean; + + /** + * Defines the highlight state of the list items. + * Available options are: `"None"` (by default), `"Positive"`, `"Critical"`, `"Information"` and `"Negative"`. + * + * **Note:** Available since [v1.24](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.24) of **@ui5/webcomponents-fiori**. + * @default "None" + */ + highlight?: Highlight | keyof typeof Highlight; + + /** + * Defines the icon to be displayed as graphical element within the component. + * The SAP-icons font provides numerous options. + * + * **Example:** + * + * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html). + * @default undefined + */ + icon?: string | undefined; + + /** + * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-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:** Available since [v1.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.13.0) of **@ui5/webcomponents-fiori**. + * @default false + */ + loading?: boolean; + + /** + * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-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 + */ + loadingDelay?: number; + + /** + * The navigated state of the list item. + * If set to `true`, a navigation indicator is displayed at the end of the list item. + * + * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents-fiori**. + * @default false + */ + navigated?: boolean; + + /** + * Defines the selected state of the component. + * @default false + */ + selected?: boolean; + + /** + * Defines the text of the tree item. + * @default undefined + */ + text?: string | undefined; + + /** + * Defines the text of the tooltip for the menu item. + * + * **Note:** Available since [v1.23.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.23.0) of **@ui5/webcomponents-fiori**. + * @default undefined + */ + tooltip?: string | undefined; + + /** + * Defines the visual indication and behavior of the list items. + * Available options are `Active` (by default), `Inactive`, `Detail` and `Navigation`. + * + * **Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover, + * while with type `Inactive` and `Detail` - will not. + * @default "Active" + */ + type?: ListItemType | keyof typeof ListItemType; +} + +interface UserMenuItemDomRef extends Required, Ui5DomRef {} + +interface UserMenuItemPropTypes + extends UserMenuItemAttributes, + Omit { + /** + * Defines the items of this component. + * + * **Note:** Use `UserMenuItem` for the intended design. + */ + children?: ReactNode | ReactNode[]; + + /** + * Defines the delete button, displayed in "Delete" mode. + * **Note:** While the slot allows custom buttons, to match + * design guidelines, please use the `ui5-button` component. + * **Note:** When the slot is not present, a built-in delete button will be displayed. + * + * __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="deleteButton"`). + * 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 [v1.9.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.9.0) of **@ui5/webcomponents-fiori**. + */ + deleteButton?: UI5WCSlotsNode; + + /** + * Defines the components that should be displayed at the end of the menu item. + * + * **Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link` + * or `ui5-icon` in order to preserve the intended design. If there are components added to this slot, + * and there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot, + * nether `additionalText` nor components added to this slot would be displayed. + * + * 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`. + * + * __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. + * + * __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.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-fiori**. + */ + endContent?: UI5WCSlotsNode; + /** + * Fired when the user clicks on the detail button when type is `Detail`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onDetailClick?: (event: Ui5CustomEvent) => void; +} + +/** + * `UserMenuItem` is the item to use inside a `UserMenu`. + * An arbitrary hierarchy structure can be represented by recursively nesting menu items. + * + * ### Usage + * + * `UserMenuItem` represents a node in a `UserMenu`. The user menu itself is rendered as a list, + * and each `ui5-menu-item` is represented by a menu item in that menu. Therefore, you should only use + * `UserMenuItem` directly in your apps. The `ui5-menu` menu item is internal for the menu, and not intended for public use. + * + * + * + * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * + * @since [2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of __@ui5/webcomponents-fiori__. + * @experimental + */ +const UserMenuItem = withWebComponent( + 'ui5-user-menu-item', + [ + 'accessibilityAttributes', + 'accessibleName', + 'additionalText', + 'highlight', + 'icon', + 'loadingDelay', + 'text', + 'tooltip', + 'type' + ], + ['disabled', 'loading', 'navigated', 'selected'], + ['deleteButton', 'endContent'], + ['detail-click'] +); + +UserMenuItem.displayName = 'UserMenuItem'; + +export { UserMenuItem }; +export type { UserMenuItemDomRef, UserMenuItemPropTypes }; diff --git a/packages/main/src/webComponents/index.ts b/packages/main/src/webComponents/index.ts index 9a02f2b3e38..44e672fde9e 100644 --- a/packages/main/src/webComponents/index.ts +++ b/packages/main/src/webComponents/index.ts @@ -99,6 +99,7 @@ export * from './TableHeaderCell/index.js'; export * from './TableHeaderRow/index.js'; export * from './TableRow/index.js'; export * from './TableSelection/index.js'; +export * from './TableVirtualizer/index.js'; export * from './TabSeparator/index.js'; export * from './Tag/index.js'; export * from './Text/index.js'; @@ -123,6 +124,9 @@ export * from './TreeItem/index.js'; export * from './TreeItemCustom/index.js'; export * from './UploadCollection/index.js'; export * from './UploadCollectionItem/index.js'; +export * from './UserMenu/index.js'; +export * from './UserMenuAccount/index.js'; +export * from './UserMenuItem/index.js'; export * from './ViewSettingsDialog/index.js'; export * from './Wizard/index.js'; export * from './WizardStep/index.js'; From 33dd5b062e99d25deeb1b64f72481c6b6cd97560 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Thu, 5 Dec 2024 16:26:33 +0100 Subject: [PATCH 05/14] create story for UserMenu --- .storybook/main.ts | 2 +- .../src/webComponents/UserMenu/UserMenu.mdx | 34 +++++++++ .../UserMenu/UserMenu.stories.tsx | 69 +++++++++++++++++++ 3 files changed, 104 insertions(+), 1 deletion(-) create mode 100644 packages/main/src/webComponents/UserMenu/UserMenu.mdx create mode 100644 packages/main/src/webComponents/UserMenu/UserMenu.stories.tsx diff --git a/.storybook/main.ts b/.storybook/main.ts index bbcab54a8a2..9e4ec0e49f9 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,5 +1,5 @@ -import type { StorybookConfig } from '@storybook/react-vite'; import { dirname, join } from 'path'; +import type { StorybookConfig } from '@storybook/react-vite'; import remarkGfm from 'remark-gfm'; import { isChromatic } from './utils'; diff --git a/packages/main/src/webComponents/UserMenu/UserMenu.mdx b/packages/main/src/webComponents/UserMenu/UserMenu.mdx new file mode 100644 index 00000000000..1e7c555a11f --- /dev/null +++ b/packages/main/src/webComponents/UserMenu/UserMenu.mdx @@ -0,0 +1,34 @@ +import { ControlsWithNote, DocsHeader, Footer } from '@sb/components'; +import { ArgTypes, Canvas, Description, Markdown, Meta } from '@storybook/blocks'; +import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw'; +import { UserMenuAccount } from '../UserMenuAccount/index'; +import { UserMenuItem } from '../UserMenuItem/index'; +import * as ComponentStories from './UserMenu.stories'; + + + + + +
+ +## Example + + + +## Properties + + + +{SubcomponentsSection} + +## UserMenuAccount + + + + +## UserMenuItem + + + + +