From 7d4906b6612b0963ec219bc474cd33a778dbfdab Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 6 Oct 2025 10:44:36 +0200 Subject: [PATCH 01/13] updates deps (without `@ui5/webcomponents-tools`) --- package.json | 10 +- packages/ai/package.json | 2 +- packages/base/package.json | 2 +- packages/charts/package.json | 4 +- packages/compat/package.json | 4 +- packages/cypress-commands/package.json | 4 +- packages/main/package.json | 8 +- yarn.lock | 161 +++++++++++++------------ 8 files changed, 98 insertions(+), 97 deletions(-) diff --git a/package.json b/package.json index af1d4d8f9a8..b0dc271e8c5 100644 --- a/package.json +++ b/package.json @@ -40,11 +40,11 @@ "@storybook/addon-a11y": "9.1.7", "@storybook/addon-docs": "9.1.7", "@storybook/react-vite": "9.1.7", - "@ui5/webcomponents": "2.14.0", - "@ui5/webcomponents-ai": "2.14.0", - "@ui5/webcomponents-compat": "2.14.0", - "@ui5/webcomponents-fiori": "2.14.0", - "@ui5/webcomponents-icons": "2.14.0", + "@ui5/webcomponents": "2.15.0", + "@ui5/webcomponents-ai": "2.15.0", + "@ui5/webcomponents-compat": "2.15.0", + "@ui5/webcomponents-fiori": "2.15.0", + "@ui5/webcomponents-icons": "2.15.0", "react": "19.1.1", "react-dom": "19.1.1", "remark-gfm": "4.0.1", diff --git a/packages/ai/package.json b/packages/ai/package.json index 7f47d32f416..3e03c25cd1a 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -45,7 +45,7 @@ "@ui5/webcomponents-react-base": "workspace:~" }, "peerDependencies": { - "@ui5/webcomponents-ai": "~2.14.0", + "@ui5/webcomponents-ai": "~2.15.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/base/package.json b/packages/base/package.json index 970403876bb..1d0f20d325f 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -88,7 +88,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~2.14.0", + "@ui5/webcomponents-base": "~2.15.0", "react": "^18 || ^19" }, "peerDependenciesMeta": { diff --git a/packages/charts/package.json b/packages/charts/package.json index 8f5249e9392..7107cbde5cd 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -131,8 +131,8 @@ "recharts": "2.15.4" }, "peerDependencies": { - "@ui5/webcomponents-react": "~2.14.0", - "@ui5/webcomponents-react-base": "~2.14.0", + "@ui5/webcomponents-react": "~2.15.0", + "@ui5/webcomponents-react-base": "~2.15.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/compat/package.json b/packages/compat/package.json index dba389a8de4..25f8ee89a9d 100644 --- a/packages/compat/package.json +++ b/packages/compat/package.json @@ -93,8 +93,8 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents-compat": "~2.14.0", - "@ui5/webcomponents-react": "~2.14.0", + "@ui5/webcomponents-compat": "~2.15.0", + "@ui5/webcomponents-react": "~2.15.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json index ea789384fa8..a51dc25d548 100644 --- a/packages/cypress-commands/package.json +++ b/packages/cypress-commands/package.json @@ -23,8 +23,8 @@ "clean": "rimraf dist api-commands.json api-queries.json" }, "peerDependencies": { - "@ui5/webcomponents": "~2.14.0", - "@ui5/webcomponents-base": "~2.14.0", + "@ui5/webcomponents": "~2.15.0", + "@ui5/webcomponents-base": "~2.15.0", "cypress": "^12 || ^13 || ^14 || ^15" }, "peerDependenciesMeta": { diff --git a/packages/main/package.json b/packages/main/package.json index 3f6ff30cd0d..36ffc5bb3a3 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -789,10 +789,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~2.14.0", - "@ui5/webcomponents-base": "~2.14.0", - "@ui5/webcomponents-fiori": "~2.14.0", - "@ui5/webcomponents-icons": "~2.14.0", + "@ui5/webcomponents": "~2.15.0", + "@ui5/webcomponents-base": "~2.15.0", + "@ui5/webcomponents-fiori": "~2.15.0", + "@ui5/webcomponents-icons": "~2.15.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/yarn.lock b/yarn.lock index 05982e26b8f..6d5edf9f5b0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4870,42 +4870,43 @@ __metadata: dependencies: "@ui5/webcomponents-react-base": "workspace:~" peerDependencies: - "@ui5/webcomponents-ai": ~2.14.0 + "@ui5/webcomponents-ai": ~2.15.0 react: ^18 || ^19 languageName: unknown linkType: soft -"@ui5/webcomponents-ai@npm:2.14.0": - version: 2.14.0 - resolution: "@ui5/webcomponents-ai@npm:2.14.0" +"@ui5/webcomponents-ai@npm:2.15.0": + version: 2.15.0 + resolution: "@ui5/webcomponents-ai@npm:2.15.0" dependencies: - "@ui5/webcomponents": "npm:2.14.0" - "@ui5/webcomponents-base": "npm:2.14.0" - "@ui5/webcomponents-icons": "npm:2.14.0" - "@ui5/webcomponents-theming": "npm:2.14.0" - checksum: 10c0/77b37abf1b1adec8d9b50599dfc5194a08f6ccba996350dd6a340b0b5835366303c812302b9eb56ab3350de653eeebae82845b6b927279415e479485b71f3e07 + "@ui5/webcomponents": "npm:2.15.0" + "@ui5/webcomponents-base": "npm:2.15.0" + "@ui5/webcomponents-icons": "npm:2.15.0" + "@ui5/webcomponents-theming": "npm:2.15.0" + checksum: 10c0/d9bbaf4814763e9e0a8a37d6de2b753d70987d5d9cc2890efadeed526ba8280fbf9be2a184502081be1f5a8c87c9461cd2f91d4444191f35044e21610b9ff31c languageName: node linkType: hard -"@ui5/webcomponents-base@npm:2.14.0": - version: 2.14.0 - resolution: "@ui5/webcomponents-base@npm:2.14.0" +"@ui5/webcomponents-base@npm:2.15.0": + version: 2.15.0 + resolution: "@ui5/webcomponents-base@npm:2.15.0" dependencies: "@lit-labs/ssr-dom-shim": "npm:^1.1.2" + chokidar-cli: "npm:^3.0.0" lit-html: "npm:^2.0.1" - checksum: 10c0/0d9674ab27d28122233a6c7448e602f914d3618647b68fb3d67a4f8fd9a3b3d51bea50ad3a05e40cd6e709d28f2f803c9fb2d4f26281d2a67fb8ff7a764b6809 + checksum: 10c0/4c1037dbc784c8732d959136c8e6bc8ed3932845455d7ab81b1f8c4dfe592d02de368deca4f86c272f651e192331b03459a0165df3af066c7721d2fa9d8caf01 languageName: node linkType: hard -"@ui5/webcomponents-compat@npm:2.14.0": - version: 2.14.0 - resolution: "@ui5/webcomponents-compat@npm:2.14.0" +"@ui5/webcomponents-compat@npm:2.15.0": + version: 2.15.0 + resolution: "@ui5/webcomponents-compat@npm:2.15.0" dependencies: - "@ui5/webcomponents": "npm:2.14.0" - "@ui5/webcomponents-base": "npm:2.14.0" - "@ui5/webcomponents-icons": "npm:2.14.0" - "@ui5/webcomponents-theming": "npm:2.14.0" - checksum: 10c0/be682ab83d4b9c0a39f7a0dab7dcea7e6af86352d0d94bbdd3212f8cd85eaa0f9cd6d380739ea583c7dcfb64a308592907de7552ef1c3fcc985d59e42bfe97d1 + "@ui5/webcomponents": "npm:2.15.0" + "@ui5/webcomponents-base": "npm:2.15.0" + "@ui5/webcomponents-icons": "npm:2.15.0" + "@ui5/webcomponents-theming": "npm:2.15.0" + checksum: 10c0/e16a0557cdfd350e814de247cf5098667becdf0766b8e6bc6c40237733df6e90e18dd701af9361628dc19c97c567de7fe5367e2249cba597bbbbb840647051a2 languageName: node linkType: hard @@ -4913,8 +4914,8 @@ __metadata: version: 0.0.0-use.local resolution: "@ui5/webcomponents-cypress-commands@workspace:packages/cypress-commands" peerDependencies: - "@ui5/webcomponents": ~2.14.0 - "@ui5/webcomponents-base": ~2.14.0 + "@ui5/webcomponents": ~2.15.0 + "@ui5/webcomponents-base": ~2.15.0 cypress: ^12 || ^13 || ^14 || ^15 peerDependenciesMeta: "@ui5/webcomponents": @@ -4924,53 +4925,53 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-fiori@npm:2.14.0": - version: 2.14.0 - resolution: "@ui5/webcomponents-fiori@npm:2.14.0" +"@ui5/webcomponents-fiori@npm:2.15.0": + version: 2.15.0 + resolution: "@ui5/webcomponents-fiori@npm:2.15.0" dependencies: - "@ui5/webcomponents": "npm:2.14.0" - "@ui5/webcomponents-base": "npm:2.14.0" - "@ui5/webcomponents-icons": "npm:2.14.0" - "@ui5/webcomponents-theming": "npm:2.14.0" + "@ui5/webcomponents": "npm:2.15.0" + "@ui5/webcomponents-base": "npm:2.15.0" + "@ui5/webcomponents-icons": "npm:2.15.0" + "@ui5/webcomponents-theming": "npm:2.15.0" "@zxing/library": "npm:^0.21.3" - checksum: 10c0/be85d12d80ff775263040d44e6e6658114dc98a11c134101dcfba3937f58268f5facf4c7420a0575392bb0d8279a9bd9e5ca8654704abe260a64f796192652cf + checksum: 10c0/53f765d8c4f4d37acfdff8836a840a1b3befb9e0a76ad51de34bd28e34088739ea636047464bd47af76134044b8844a440976762c9d81aff820d101936b5c787 languageName: node linkType: hard -"@ui5/webcomponents-icons-business-suite@npm:2.14.0": - version: 2.14.0 - resolution: "@ui5/webcomponents-icons-business-suite@npm:2.14.0" +"@ui5/webcomponents-icons-business-suite@npm:2.15.0": + version: 2.15.0 + resolution: "@ui5/webcomponents-icons-business-suite@npm:2.15.0" dependencies: - "@ui5/webcomponents-base": "npm:2.14.0" - checksum: 10c0/30971a4b0bf4ceb0c3d6f02d753087f43fd39bf4bd180121dfcdd1a11768ff1d5fe3877f2f02173c779fb2bf90f913b74e559b95db4bc373913023aba0634a8b + "@ui5/webcomponents-base": "npm:2.15.0" + checksum: 10c0/1f33107c902605f84e9c0746d5a08c1f220643366c1745c783be41283178edf6a42a570ed21a8d1aeb6a2dbd91c699638568bb738b7d75fadd7817cfd91c8f51 languageName: node linkType: hard -"@ui5/webcomponents-icons-tnt@npm:2.14.0": - version: 2.14.0 - resolution: "@ui5/webcomponents-icons-tnt@npm:2.14.0" +"@ui5/webcomponents-icons-tnt@npm:2.15.0": + version: 2.15.0 + resolution: "@ui5/webcomponents-icons-tnt@npm:2.15.0" dependencies: - "@ui5/webcomponents-base": "npm:2.14.0" - checksum: 10c0/96d2ad72de3afe68c6e85e3ec8b8215863a3cad3e3dd3e1194189862dd074f03abf81843a9baf5424da0aa87a3ccb91cb9590c5a359c4d528c43de616f4c9a01 + "@ui5/webcomponents-base": "npm:2.15.0" + checksum: 10c0/01a84162c950626b1ee98f48a35822c3fe612e260925128aeb84cdeee64786c6bc4e3fb9aa3701316f501e66322e2cf3b50b9beb1367ce2b58392b9c00001816 languageName: node linkType: hard -"@ui5/webcomponents-icons@npm:2.14.0": - version: 2.14.0 - resolution: "@ui5/webcomponents-icons@npm:2.14.0" +"@ui5/webcomponents-icons@npm:2.15.0": + version: 2.15.0 + resolution: "@ui5/webcomponents-icons@npm:2.15.0" dependencies: - "@ui5/webcomponents-base": "npm:2.14.0" - checksum: 10c0/c1825eda6d534af3f6c3f2ca254c6654cacf7bd3a288ebb1f88bb1042a718264d4dcc959b11a58eda69de4050da95f14c5968d779c6e823d3a6f20daac6a21c4 + "@ui5/webcomponents-base": "npm:2.15.0" + checksum: 10c0/7b4b7cdc32aea96e47cc77b905ccc8528f9d0fce81fd6646cecf7e4d31b907619d6f4fb3724d6ef0248ef93bfa02b34dbad63c307735070be308bc4b41c8fc57 languageName: node linkType: hard -"@ui5/webcomponents-localization@npm:2.14.0": - version: 2.14.0 - resolution: "@ui5/webcomponents-localization@npm:2.14.0" +"@ui5/webcomponents-localization@npm:2.15.0": + version: 2.15.0 + resolution: "@ui5/webcomponents-localization@npm:2.15.0" dependencies: "@types/openui5": "npm:^1.113.0" - "@ui5/webcomponents-base": "npm:2.14.0" - checksum: 10c0/e614d846eb91646edfc94460f66a72adc929432dfb5a5a99613476e9a6dc94fff2227a69003828d3ed9672d5d74240674af6f98e491682915dcb95df7beaeea3 + "@ui5/webcomponents-base": "npm:2.15.0" + checksum: 10c0/ad93c2d9284a988d2b3b52bcfe09a3bdc55d2813b0786b2d2518eab9203705487ae7bc26929defafff3cbd1449096a63c188e6088f0acaaae567c0e2f21edcb1 languageName: node linkType: hard @@ -4979,7 +4980,7 @@ __metadata: resolution: "@ui5/webcomponents-react-base@workspace:packages/base" peerDependencies: "@types/react": "*" - "@ui5/webcomponents-base": ~2.14.0 + "@ui5/webcomponents-base": ~2.15.0 react: ^18 || ^19 peerDependenciesMeta: "@types/react": @@ -4997,8 +4998,8 @@ __metadata: react-content-loader: "npm:7.1.1" recharts: "npm:2.15.4" peerDependencies: - "@ui5/webcomponents-react": ~2.14.0 - "@ui5/webcomponents-react-base": ~2.14.0 + "@ui5/webcomponents-react": ~2.15.0 + "@ui5/webcomponents-react-base": ~2.15.0 react: ^18 || ^19 languageName: unknown linkType: soft @@ -5023,8 +5024,8 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents-compat": ~2.14.0 - "@ui5/webcomponents-react": ~2.14.0 + "@ui5/webcomponents-compat": ~2.15.0 + "@ui5/webcomponents-react": ~2.15.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5050,10 +5051,10 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents": ~2.14.0 - "@ui5/webcomponents-base": ~2.14.0 - "@ui5/webcomponents-fiori": ~2.14.0 - "@ui5/webcomponents-icons": ~2.14.0 + "@ui5/webcomponents": ~2.15.0 + "@ui5/webcomponents-base": ~2.15.0 + "@ui5/webcomponents-fiori": ~2.15.0 + "@ui5/webcomponents-icons": ~2.15.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5070,13 +5071,13 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-theming@npm:2.14.0": - version: 2.14.0 - resolution: "@ui5/webcomponents-theming@npm:2.14.0" +"@ui5/webcomponents-theming@npm:2.15.0": + version: 2.15.0 + resolution: "@ui5/webcomponents-theming@npm:2.15.0" dependencies: "@sap-theming/theming-base-content": "npm:11.29.3" - "@ui5/webcomponents-base": "npm:2.14.0" - checksum: 10c0/faacfaafd18f49eab8cc9c17b3288e9b846ad9a8c7542305132c21ea97e506bfafd7721482f3adea21781944647dfb374cfbc09acdd0c5b73c786333bb4cba49 + "@ui5/webcomponents-base": "npm:2.15.0" + checksum: 10c0/b625e54971fd73e4752ef9d6c26c5f42c24497692fdd69f6d8d1b1152effdd8facf1f7c52771ccd3bc890c9188acd0fdd16688d12e2855e78a4ed4429880f6d1 languageName: node linkType: hard @@ -5145,17 +5146,17 @@ __metadata: languageName: node linkType: hard -"@ui5/webcomponents@npm:2.14.0": - version: 2.14.0 - resolution: "@ui5/webcomponents@npm:2.14.0" +"@ui5/webcomponents@npm:2.15.0": + version: 2.15.0 + resolution: "@ui5/webcomponents@npm:2.15.0" dependencies: - "@ui5/webcomponents-base": "npm:2.14.0" - "@ui5/webcomponents-icons": "npm:2.14.0" - "@ui5/webcomponents-icons-business-suite": "npm:2.14.0" - "@ui5/webcomponents-icons-tnt": "npm:2.14.0" - "@ui5/webcomponents-localization": "npm:2.14.0" - "@ui5/webcomponents-theming": "npm:2.14.0" - checksum: 10c0/2ff0819eaa6af8196f4fbfe915e251084d9fee4eb472583bd44facd5372bc9c0dc3a3244af34230398fef6f6e36b4a47c853c9f8f170e2937e62ca93d6a519f8 + "@ui5/webcomponents-base": "npm:2.15.0" + "@ui5/webcomponents-icons": "npm:2.15.0" + "@ui5/webcomponents-icons-business-suite": "npm:2.15.0" + "@ui5/webcomponents-icons-tnt": "npm:2.15.0" + "@ui5/webcomponents-localization": "npm:2.15.0" + "@ui5/webcomponents-theming": "npm:2.15.0" + checksum: 10c0/8e007f6ac5d05662937c63268facfbc05a9d867127f07136ca207dcacf91512ae66ef2331e857eb1c2fb486e7ec4397bec2e7820860396d408df4eeca2da05db languageName: node linkType: hard @@ -20171,11 +20172,11 @@ __metadata: "@types/node": "npm:22.18.6" "@types/react": "npm:19.1.13" "@types/react-dom": "npm:19.1.9" - "@ui5/webcomponents": "npm:2.14.0" - "@ui5/webcomponents-ai": "npm:2.14.0" - "@ui5/webcomponents-compat": "npm:2.14.0" - "@ui5/webcomponents-fiori": "npm:2.14.0" - "@ui5/webcomponents-icons": "npm:2.14.0" + "@ui5/webcomponents": "npm:2.15.0" + "@ui5/webcomponents-ai": "npm:2.15.0" + "@ui5/webcomponents-compat": "npm:2.15.0" + "@ui5/webcomponents-fiori": "npm:2.15.0" + "@ui5/webcomponents-icons": "npm:2.15.0" "@ui5/webcomponents-tools": "npm:2.14.0" "@vitejs/plugin-react": "npm:5.0.3" chromatic: "npm:13.2.0" From a6595fc10578feed5912d68a4e98c8104d6e67b7 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 6 Oct 2025 10:52:44 +0200 Subject: [PATCH 02/13] run wrapper script (main) --- .storybook/custom-element-manifests/ai.json | 4 +- .../custom-element-manifests/fiori.json | 226 ++++++++++++++++-- .storybook/custom-element-manifests/main.json | 105 ++++++-- .../main/src/webComponents/Button/index.tsx | 5 + .../webComponents/DynamicPageHeader/index.tsx | 4 + .../src/webComponents/FilterItem/index.tsx | 13 +- .../webComponents/FilterItemOption/index.tsx | 11 +- .../src/webComponents/GroupItem/index.tsx | 52 ++++ .../main/src/webComponents/SortItem/index.tsx | 11 +- .../src/webComponents/SplitButton/index.tsx | 1 + .../src/webComponents/ToggleButton/index.tsx | 5 + .../src/webComponents/Tokenizer/index.tsx | 12 +- .../main/src/webComponents/Toolbar/index.tsx | 2 +- .../src/webComponents/ToolbarSelect/index.tsx | 31 ++- .../ViewSettingsDialog/index.tsx | 28 ++- 15 files changed, 458 insertions(+), 52 deletions(-) create mode 100644 packages/main/src/webComponents/GroupItem/index.tsx diff --git a/.storybook/custom-element-manifests/ai.json b/.storybook/custom-element-manifests/ai.json index a8dab28a182..d9c5e41bd9f 100644 --- a/.storybook/custom-element-manifests/ai.json +++ b/.storybook/custom-element-manifests/ai.json @@ -110,7 +110,7 @@ ] }, "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", "privacy": "public", "_ui5since": "2.6.0" } @@ -177,7 +177,7 @@ } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", "name": "accessibility-attributes", "default": "{}", "fieldName": "accessibilityAttributes", diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index 73b6741d8de..78265833dfd 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -2210,7 +2210,7 @@ { "kind": "enum", "name": "ViewSettingsDialogMode", - "description": "Different types of Bar.", + "description": "Different types of ViewSettings.", "_ui5privacy": "public", "members": [ { @@ -2232,6 +2232,16 @@ "default": "Filter", "name": "Filter", "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "_ui5since": "2.13.0", + "description": "Group type", + "default": "Group", + "name": "Group", + "readonly": true } ] } @@ -2684,7 +2694,7 @@ "declarations": [ { "kind": "class", - "description": "Header of the DynamicPage.\n\n### Overview\n\nThe DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\nand is used to serve as header of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageHeader` can hold any layout control and has two states - expanded\nand collapsed (snapped). The switching between these states happens when:\n- the user scrolls below its bottom margin\n- the user clicks on the `DynamicPageTitle`\n- through the `DynamicPage` property `headerSnapped`\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageHeader` depends on the behavior of the\ncontent that is displayed.", + "description": "Header of the DynamicPage.\n\n### Overview\n\nThe DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\nand is used to serve as header of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageHeader` can hold any layout control and has two states - expanded\nand collapsed (snapped). The switching between these states happens when:\n- the user scrolls below its bottom margin\n- the user clicks on the `DynamicPageTitle`\n- through the `DynamicPage` property `headerSnapped`\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageHeader` depends on the behavior of the\ncontent that is displayed.\n\n### Accessibility\n\nThe `DynamicPageHeader` provides an accessible label for the header region.", "name": "DynamicPageHeader", "slots": [ { @@ -3165,12 +3175,12 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\n### Usage\n\nFor the `ui5-filter-item`\n### ES6 Module Import\n\n`import @ui5/webcomponents-fiori/dist/FilterItem.js\";`", + "description": "### Overview\n\nThe `ui5-filter-item` component defines the filtering criteria for data in `ui5-view-settings-dialog`.\nIt represents a single filter category that contains multiple filter options that users can select.\n\n### Usage\n\nThe `ui5-filter-item` is used within the `ui5-view-settings-dialog` to provide filtering options.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`", "name": "FilterItem", "slots": [ { "name": "values", - "description": "Defines the `values` list.", + "description": "Defines the filter options available for this filter category.", "_ui5type": { "text": "Array", "references": [ @@ -3191,7 +3201,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text of the component.", + "description": "Defines the text of the filter item.", "default": "undefined", "privacy": "public" }, @@ -3201,14 +3211,14 @@ "type": { "text": "string | undefined" }, - "description": "Defines the additional text of the component.", + "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.", "default": "undefined", "privacy": "public" } ], "attributes": [ { - "description": "Defines the text of the component.", + "description": "Defines the text of the filter item.", "name": "text", "default": "undefined", "fieldName": "text", @@ -3217,7 +3227,7 @@ } }, { - "description": "Defines the additional text of the component.", + "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.", "name": "additional-text", "default": "undefined", "fieldName": "additionalText", @@ -3263,7 +3273,7 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\n### Usage\n\nFor the `ui5-filter-item-option`\n### ES6 Module Import\n\n`import @ui5/webcomponents-fiori/dist/FilterItemOption.js\";`", + "description": "### Overview\n\nThe `ui5-filter-item-option` component defines individual filter values within a `ui5-filter-item`.\nIt represents a single selectable option that users can choose to filter data.\n\n### Usage\n\nThe `ui5-filter-item-option` is used as a child component within `ui5-filter-item` in the context\nof `ui5-view-settings-dialog`. Each option represents a specific value that can be used for filtering\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItemOption.js\";`", "name": "FilterItemOption", "members": [ { @@ -3272,7 +3282,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text of the component.", + "description": "Defines the text of the filter option.", "default": "undefined", "privacy": "public" }, @@ -3283,13 +3293,13 @@ "text": "boolean" }, "default": "false", - "description": "Defines if the component is selected.", + "description": "Defines if the filter option is selected.", "privacy": "public" } ], "attributes": [ { - "description": "Defines the text of the component.", + "description": "Defines the text of the filter option.", "name": "text", "default": "undefined", "fieldName": "text", @@ -3298,7 +3308,7 @@ } }, { - "description": "Defines if the component is selected.", + "description": "Defines if the filter option is selected.", "name": "selected", "default": "false", "fieldName": "selected", @@ -3671,6 +3681,87 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/GroupItem.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-group-item` component defines the grouping criteria for data in `ui5-view-settings-dialog`.\nIt represents a single group option that users can select to organize data into logical groups.\n\n### Usage\n\nThe `ui5-group-item` is used within the `ui5-view-settings-dialog` to provide grouping options.\nEach group item represents a column or field by which data can be grouped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`", + "name": "GroupItem", + "members": [ + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the group item.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the group item is selected.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the text of the group item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the group item is selected.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-group-item", + "customElement": true, + "_ui5since": "2.13.0", + "_ui5privacy": "public", + "_ui5abstract": true + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "GroupItem", + "module": "dist/GroupItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-group-item", + "declaration": { + "name": "GroupItem", + "module": "dist/GroupItem.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/IllustratedMessage.js", @@ -9690,7 +9781,7 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\n### Usage\n\nFor the `ui5-sort-item`\n### ES6 Module Import\n\n`import @ui5/webcomponents-fiori/dist/SortItem.js\";`", + "description": "### Overview\n\nThe `ui5-sort-item` component defines the sorting criteria for data in `ui5-view-settings-dialog`.\nIt represents a single sort option that users can select to organize data in ascending or descending order.\n\n### Usage\n\nThe `ui5-sort-item` is used within the `ui5-view-settings-dialog` to provide sorting options.\nEach sort item represents a column or field by which data can be sorted.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`", "name": "SortItem", "members": [ { @@ -9699,7 +9790,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text of the component.", + "description": "Defines the text of the sort item.", "default": "undefined", "privacy": "public" }, @@ -9710,13 +9801,13 @@ "text": "boolean" }, "default": "false", - "description": "Defines if the component is selected.", + "description": "Defines if the sort item is selected.", "privacy": "public" } ], "attributes": [ { - "description": "Defines the text of the component.", + "description": "Defines the text of the sort item.", "name": "text", "default": "undefined", "fieldName": "text", @@ -9725,7 +9816,7 @@ } }, { - "description": "Defines if the component is selected.", + "description": "Defines if the sort item is selected.", "name": "selected", "default": "false", "fieldName": "selected", @@ -12536,6 +12627,21 @@ ] }, "_ui5privacy": "public" + }, + { + "name": "groupItems", + "description": "Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "GroupItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/GroupItem.js" + } + ] + }, + "_ui5privacy": "public" } ], "members": [ @@ -12549,6 +12655,17 @@ "description": "Defines the initial sort order.", "privacy": "public" }, + { + "kind": "field", + "name": "groupDescending", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the initial group order.", + "privacy": "public", + "_ui5since": "2.13.0" + }, { "kind": "field", "name": "open", @@ -12640,6 +12757,38 @@ "_ui5privacy": "public", "description": "The selected sort order (true = descending, false = ascending)." }, + { + "type": { + "text": "String" + }, + "name": "groupOrder", + "_ui5privacy": "public", + "description": "The current group order selected." + }, + { + "type": { + "text": "String" + }, + "name": "groupBy", + "_ui5privacy": "public", + "description": "The currently selected `ui5-group-item` text attribute." + }, + { + "type": { + "text": "HTMLElement" + }, + "name": "groupByItem", + "_ui5privacy": "public", + "description": "The currently selected `ui5-group-item`." + }, + { + "type": { + "text": "Boolean" + }, + "name": "groupDescending", + "_ui5privacy": "public", + "description": "The selected group order (true = descending, false = ascending)." + }, { "type": { "text": "Array" @@ -12700,6 +12849,38 @@ "_ui5privacy": "public", "description": "The selected sort order (true = descending, false = ascending)." }, + { + "type": { + "text": "String" + }, + "name": "groupOrder", + "_ui5privacy": "public", + "description": "The current group order selected." + }, + { + "type": { + "text": "String" + }, + "name": "groupBy", + "_ui5privacy": "public", + "description": "The currently selected `ui5-group-item` text attribute." + }, + { + "type": { + "text": "HTMLElement" + }, + "name": "groupByItem", + "_ui5privacy": "public", + "description": "The currently selected `ui5-group-item`." + }, + { + "type": { + "text": "Boolean" + }, + "name": "groupDescending", + "_ui5privacy": "public", + "description": "The selected group order (true = descending, false = ascending)." + }, { "type": { "text": "Array" @@ -12756,6 +12937,15 @@ "text": "boolean" } }, + { + "description": "Defines the initial group order.", + "name": "group-descending", + "default": "false", + "fieldName": "groupDescending", + "type": { + "text": "boolean" + } + }, { "description": "Indicates if the dialog is open.", "name": "open", diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index e7b5c1f9e41..696a8b3a082 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -4,30 +4,30 @@ "modules": [ { "kind": "javascript-module", - "path": "dist/colorpicker-utils/ColorValue.js", + "path": "dist/delegate/DragAndDropHandler.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "ColorValue", - "module": "dist/colorpicker-utils/ColorValue.js" + "name": "DragAndDropHandler", + "module": "dist/delegate/DragAndDropHandler.js" } } ] }, { "kind": "javascript-module", - "path": "dist/delegate/DragAndDropHandler.js", + "path": "dist/colorpicker-utils/ColorValue.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "DragAndDropHandler", - "module": "dist/delegate/DragAndDropHandler.js" + "name": "ColorValue", + "module": "dist/colorpicker-utils/ColorValue.js" } } ] @@ -211,6 +211,21 @@ "declarations": [], "exports": [] }, + { + "kind": "javascript-module", + "path": "dist/features/InputComposition.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "InputComposition", + "module": "dist/features/InputComposition.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/features/InputSuggestions.js", @@ -3482,7 +3497,6 @@ "kind": "enum", "name": "TableGrowingMode", "description": "Growing mode of the <ui5-table> component.", - "_ui5experimental": true, "_ui5privacy": "public", "members": [ { @@ -5581,7 +5595,7 @@ ] }, "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", "privacy": "public", "_ui5since": "1.2.0" }, @@ -5793,7 +5807,7 @@ } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", "name": "accessibility-attributes", "default": "{}", "fieldName": "accessibilityAttributes", @@ -25572,7 +25586,7 @@ ] }, "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", "privacy": "public", "_ui5since": "2.13.0" } @@ -25648,7 +25662,7 @@ } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", "name": "accessibility-attributes", "default": "{}", "fieldName": "accessibilityAttributes", @@ -28078,6 +28092,21 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/TableCustomAnnouncement.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableCustomAnnouncement", + "module": "dist/TableCustomAnnouncement.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/TableDragAndDrop.js", @@ -31651,7 +31680,7 @@ ] }, "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", "privacy": "public", "_ui5since": "1.2.0", "inheritedFrom": { @@ -31865,7 +31894,7 @@ } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", "name": "accessibility-attributes", "default": "{}", "fieldName": "accessibilityAttributes", @@ -32268,6 +32297,16 @@ "privacy": "public", "_ui5since": "2.5.0" }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "default": "undefined", + "privacy": "public" + }, { "kind": "field", "name": "showClearAll", @@ -32394,6 +32433,15 @@ "text": "boolean" } }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, { "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", @@ -32473,7 +32521,7 @@ "slots": [ { "name": "default", - "description": "Defines the items of the component.\n \n **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.", + "description": "Defines the items of the component.\n\n**Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.", "_ui5propertyName": "items", "_ui5type": { "text": "Array", @@ -33048,6 +33096,15 @@ ] }, "_ui5privacy": "public" + }, + { + "name": "label", + "description": "Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.", + "_ui5since": "2.15.0", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" } ], "members": [ @@ -33108,6 +33165,17 @@ "default": "undefined", "privacy": "public" }, + { + "kind": "field", + "name": "value", + "description": "Defines the value of the component:", + "privacy": "public", + "default": "\"\"", + "type": { + "text": "string | undefined" + }, + "_ui5since": "2.15.0" + }, { "kind": "field", "name": "overflowPriority", @@ -33242,6 +33310,15 @@ "text": "string | undefined" } }, + { + "description": "Defines the value of the component:", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "any" + } + }, { "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", "name": "overflow-priority", diff --git a/packages/main/src/webComponents/Button/index.tsx b/packages/main/src/webComponents/Button/index.tsx index 50e2f5a5be9..57d87b38715 100644 --- a/packages/main/src/webComponents/Button/index.tsx +++ b/packages/main/src/webComponents/Button/index.tsx @@ -20,6 +20,11 @@ interface ButtonAttributes { * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. * + * - **ariaLabel**: Defines the accessible ARIA name of the component. + * Accepts any string value. + * + * - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button. + * * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element. * Accepts a lowercase string value. * diff --git a/packages/main/src/webComponents/DynamicPageHeader/index.tsx b/packages/main/src/webComponents/DynamicPageHeader/index.tsx index 70c6c1f6d1c..46ac71141c0 100644 --- a/packages/main/src/webComponents/DynamicPageHeader/index.tsx +++ b/packages/main/src/webComponents/DynamicPageHeader/index.tsx @@ -37,6 +37,10 @@ interface DynamicPageHeaderPropTypes extends DynamicPageHeaderAttributes, Omit, Ui5DomRef {} interface FilterItemPropTypes extends FilterItemAttributes, Omit { /** - * Defines the `values` list. + * Defines the filter options available for this filter category. * * __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="values"`). * 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. @@ -36,9 +37,13 @@ interface FilterItemPropTypes extends FilterItemAttributes, Omit {} /** + * The `FilterItemOption` component defines individual filter values within a `FilterItem`. + * It represents a single selectable option that users can choose to filter data. + * * ### Usage * - * For the `FilterItemOption` + * The `FilterItemOption` is used as a child component within `FilterItem` in the context + * of `ViewSettingsDialog`. Each option represents a specific value that can be used for filtering + * * * * __Note:__ This is a UI5 Web Component! [FilterItemOption UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/FilterItemOption) | [Repository](https://github.com/UI5/webcomponents) diff --git a/packages/main/src/webComponents/GroupItem/index.tsx b/packages/main/src/webComponents/GroupItem/index.tsx new file mode 100644 index 00000000000..461ce3ec82a --- /dev/null +++ b/packages/main/src/webComponents/GroupItem/index.tsx @@ -0,0 +1,52 @@ +'use client'; + +import '@ui5/webcomponents-fiori/dist/GroupItem.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; + +interface GroupItemAttributes { + /** + * Defines if the group item is selected. + * @default false + */ + selected?: boolean; + + /** + * Defines the text of the group item. + * @default undefined + */ + text?: string | undefined; +} + +interface GroupItemDomRef extends Required, Ui5DomRef {} + +interface GroupItemPropTypes extends GroupItemAttributes, Omit {} + +/** + * The `GroupItem` component defines the grouping criteria for data in `ViewSettingsDialog`. + * It represents a single group option that users can select to organize data into logical groups. + * + * ### Usage + * + * The `GroupItem` is used within the `ViewSettingsDialog` to provide grouping options. + * Each group item represents a column or field by which data can be grouped. + * + * + * + * __Note:__ This is a UI5 Web Component! [GroupItem UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/GroupItem) | [Repository](https://github.com/UI5/webcomponents) + * + * @since [2.13.0](https://github.com/UI5/webcomponents/releases/tag/v2.13.0) of __@ui5/webcomponents-fiori__. + * @abstract + */ +const GroupItem = withWebComponent( + 'ui5-group-item', + ['text'], + ['selected'], + [], + [], +); + +GroupItem.displayName = 'GroupItem'; + +export { GroupItem }; +export type { GroupItemDomRef, GroupItemPropTypes }; diff --git a/packages/main/src/webComponents/SortItem/index.tsx b/packages/main/src/webComponents/SortItem/index.tsx index af4a2406654..3b70af71f5e 100644 --- a/packages/main/src/webComponents/SortItem/index.tsx +++ b/packages/main/src/webComponents/SortItem/index.tsx @@ -6,13 +6,13 @@ import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface SortItemAttributes { /** - * Defines if the component is selected. + * Defines if the sort item is selected. * @default false */ selected?: boolean; /** - * Defines the text of the component. + * Defines the text of the sort item. * @default undefined */ text?: string | undefined; @@ -23,9 +23,14 @@ interface SortItemDomRef extends Required, Ui5DomRef {} interface SortItemPropTypes extends SortItemAttributes, Omit {} /** + * The `SortItem` component defines the sorting criteria for data in `ViewSettingsDialog`. + * It represents a single sort option that users can select to organize data in ascending or descending order. + * * ### Usage * - * For the `SortItem` + * The `SortItem` is used within the `ViewSettingsDialog` to provide sorting options. + * Each sort item represents a column or field by which data can be sorted. + * * * * __Note:__ This is a UI5 Web Component! [SortItem UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/SortItem) | [Repository](https://github.com/UI5/webcomponents) diff --git a/packages/main/src/webComponents/SplitButton/index.tsx b/packages/main/src/webComponents/SplitButton/index.tsx index fe9207bf797..d9bdc9c6d0e 100644 --- a/packages/main/src/webComponents/SplitButton/index.tsx +++ b/packages/main/src/webComponents/SplitButton/index.tsx @@ -19,6 +19,7 @@ interface SplitButtonAttributes { * Accepts any string value. * - **title**: Specifies a tooltip or description for screen readers. * Accepts any string value. + * - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button. * * - **arrowButton**: Attributes applied specifically to the arrow (split) button. * - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button. diff --git a/packages/main/src/webComponents/ToggleButton/index.tsx b/packages/main/src/webComponents/ToggleButton/index.tsx index eb19fd492af..0fe92de1603 100644 --- a/packages/main/src/webComponents/ToggleButton/index.tsx +++ b/packages/main/src/webComponents/ToggleButton/index.tsx @@ -20,6 +20,11 @@ interface ToggleButtonAttributes { * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. * + * - **ariaLabel**: Defines the accessible ARIA name of the component. + * Accepts any string value. + * + * - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button. + * * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element. * Accepts a lowercase string value. * diff --git a/packages/main/src/webComponents/Tokenizer/index.tsx b/packages/main/src/webComponents/Tokenizer/index.tsx index e962d025c43..0aca70ae46c 100644 --- a/packages/main/src/webComponents/Tokenizer/index.tsx +++ b/packages/main/src/webComponents/Tokenizer/index.tsx @@ -40,6 +40,16 @@ interface TokenizerAttributes { */ multiLine?: boolean; + /** + * Determines the name by which the component will be identified upon submission in an HTML form. + * + * **Note:** This property is only applicable within the context of an HTML Form element. + * **Note:** When the component is used inside a form element, + * the value is sent as the first element in the form data, even if it's empty. + * @default undefined + */ + name?: string | undefined; + /** * Defines whether the component is read-only. * @@ -123,7 +133,7 @@ interface TokenizerPropTypes */ const Tokenizer = withWebComponent( 'ui5-tokenizer', - ['accessibleName', 'accessibleNameRef'], + ['accessibleName', 'accessibleNameRef', 'name'], ['disabled', 'multiLine', 'readonly', 'showClearAll'], [], ['selection-change', 'token-delete'], diff --git a/packages/main/src/webComponents/Toolbar/index.tsx b/packages/main/src/webComponents/Toolbar/index.tsx index b05f7ab849b..7c22ba187b2 100644 --- a/packages/main/src/webComponents/Toolbar/index.tsx +++ b/packages/main/src/webComponents/Toolbar/index.tsx @@ -47,7 +47,7 @@ interface ToolbarPropTypes extends ToolbarAttributes, Omit` */ diff --git a/packages/main/src/webComponents/ToolbarSelect/index.tsx b/packages/main/src/webComponents/ToolbarSelect/index.tsx index b5c36c77c13..443002c3850 100644 --- a/packages/main/src/webComponents/ToolbarSelect/index.tsx +++ b/packages/main/src/webComponents/ToolbarSelect/index.tsx @@ -5,7 +5,7 @@ import type { ToolbarSelectChangeEventDetail } from '@ui5/webcomponents/dist/Too import type ToolbarItemOverflowBehavior from '@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface ToolbarSelectAttributes { @@ -43,6 +43,13 @@ interface ToolbarSelectAttributes { */ preventOverflowClosing?: boolean; + /** + * Defines the value of the component: + * + * **Note:** Available since [v2.15.0](https://github.com/UI5/webcomponents/releases/tag/v2.15.0) of **@ui5/webcomponents**. + */ + value?: string | undefined; + /** * Defines the value state of the component. * @default "None" @@ -62,7 +69,7 @@ interface ToolbarSelectDomRef extends Required, Ui5DomR interface ToolbarSelectPropTypes extends ToolbarSelectAttributes, - Omit { + Omit { /** * Defines the component options. * @@ -74,6 +81,22 @@ interface ToolbarSelectPropTypes * __Supported Node Type/s:__ `Array` */ children?: ReactNode | ReactNode[]; + + /** + * Defines the HTML element that will be displayed in the component input part, + * representing the selected option. + * + * __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="label"`). + * 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://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). + * + * **Note:** Available since [v2.15.0](https://github.com/UI5/webcomponents/releases/tag/v2.15.0) of **@ui5/webcomponents**. + * + * __Supported Node Type/s:__ `Array` + */ + label?: UI5WCSlotsNode; /** * Fired when the selected option changes. * @@ -119,9 +142,9 @@ interface ToolbarSelectPropTypes */ const ToolbarSelect = withWebComponent( 'ui5-toolbar-select', - ['accessibleName', 'accessibleNameRef', 'overflowPriority', 'valueState', 'width'], + ['accessibleName', 'accessibleNameRef', 'overflowPriority', 'value', 'valueState', 'width'], ['disabled', 'preventOverflowClosing'], - [], + ['label'], ['change', 'close', 'open'], ); diff --git a/packages/main/src/webComponents/ViewSettingsDialog/index.tsx b/packages/main/src/webComponents/ViewSettingsDialog/index.tsx index 110ed689574..44874dfb7c2 100644 --- a/packages/main/src/webComponents/ViewSettingsDialog/index.tsx +++ b/packages/main/src/webComponents/ViewSettingsDialog/index.tsx @@ -10,6 +10,14 @@ import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; interface ViewSettingsDialogAttributes { + /** + * Defines the initial group order. + * + * **Note:** Available since [v2.13.0](https://github.com/UI5/webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents-fiori**. + * @default false + */ + groupDescending?: boolean; + /** * Indicates if the dialog is open. * @@ -45,6 +53,7 @@ interface ViewSettingsDialogPropTypes CommonProps, | keyof ViewSettingsDialogAttributes | 'filterItems' + | 'groupItems' | 'sortItems' | 'onBeforeOpen' | 'onCancel' @@ -67,6 +76,21 @@ interface ViewSettingsDialogPropTypes */ filterItems?: UI5WCSlotsNode; + /** + * Defines the list of items against which the user could group data. + * + * **Note:** If you want to use this slot, you need to import used item: `import "@ui5/webcomponents-fiori/dist/GroupItem.js";` + * + * __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="groupItems"`). + * 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://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). + * + * __Supported Node Type/s:__ `Array` + */ + groupItems?: UI5WCSlotsNode; + /** * Defines the list of items against which the user could sort data. * @@ -157,8 +181,8 @@ interface ViewSettingsDialogPropTypes const ViewSettingsDialog = withWebComponent( 'ui5-view-settings-dialog', [], - ['open', 'sortDescending'], - ['filterItems', 'sortItems'], + ['groupDescending', 'open', 'sortDescending'], + ['filterItems', 'groupItems', 'sortItems'], ['before-open', 'cancel', 'close', 'confirm', 'open'], ); From 5cdb6884ec7b5ba7fb2c9ced5f3901a592fd6e88 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 6 Oct 2025 10:57:06 +0200 Subject: [PATCH 03/13] run wrapper script (ai) --- packages/ai/src/components/Button/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/ai/src/components/Button/index.tsx b/packages/ai/src/components/Button/index.tsx index 9a0b73d22a1..13de18f1bc4 100644 --- a/packages/ai/src/components/Button/index.tsx +++ b/packages/ai/src/components/Button/index.tsx @@ -19,6 +19,9 @@ interface ButtonAttributes { * Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`. * - **roleDescription**: Defines a human-readable description for the button's role. * Accepts any string value. + * - **title**: Specifies a tooltip or description for screen readers. + * Accepts any string value. + * - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button. * * - **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element. * - **hasPopup**: Indicates the type of popup triggered by the arrow button. From dc8b3d740917a64bbf97e52389ccf9e771a1263e Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 6 Oct 2025 10:59:27 +0200 Subject: [PATCH 04/13] add group item root & export map export --- packages/main/package.json | 4 ++++ packages/main/src/webComponents/index.ts | 1 + 2 files changed, 5 insertions(+) diff --git a/packages/main/package.json b/packages/main/package.json index 36ffc5bb3a3..0e8aa47f350 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -308,6 +308,10 @@ "types": "./dist/webComponents/FormItem/index.d.ts", "default": "./dist/webComponents/FormItem/index.js" }, + "./GroupItem": { + "types": "./dist/webComponents/GroupItem/index.d.ts", + "default": "./dist/webComponents/GroupItem/index.js" + }, "./Icon": { "types": "./dist/webComponents/Icon/index.d.ts", "default": "./dist/webComponents/Icon/index.js" diff --git a/packages/main/src/webComponents/index.ts b/packages/main/src/webComponents/index.ts index 155ca2ef608..fc1431874ed 100644 --- a/packages/main/src/webComponents/index.ts +++ b/packages/main/src/webComponents/index.ts @@ -40,6 +40,7 @@ export * from './FlexibleColumnLayout/index.js'; export * from './Form/index.js'; export * from './FormGroup/index.js'; export * from './FormItem/index.js'; +export * from './GroupItem/index.js'; export * from './Icon/index.js'; export * from './IllustratedMessage/index.js'; export * from './Input/index.js'; From 5418c9268e3b5f069da203be81ce92cba67a17ad Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 6 Oct 2025 11:26:05 +0200 Subject: [PATCH 05/13] Update ViewSettingsDialog.mdx --- .../ViewSettingsDialog/ViewSettingsDialog.mdx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.mdx b/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.mdx index 8d4da786b1e..ffdac2be334 100644 --- a/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.mdx +++ b/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.mdx @@ -73,4 +73,11 @@ const ViewSettingsDialogComponent = () => { +## GroupItem + +**Since v2.15.0** + + + +