Skip to content

Commit 04fecc4

Browse files
Lukas742Lukas742
authored
feat: update to UI5 Web Components 2.9.0 (#7203)
1 parent 5f98e64 commit 04fecc4

File tree

51 files changed

+3582
-2058
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+3582
-2058
lines changed

‎.storybook/custom-element-manifests/fiori.json

Lines changed: 1122 additions & 206 deletions
Large diffs are not rendered by default.

‎.storybook/custom-element-manifests/main.json

Lines changed: 1451 additions & 1329 deletions
Large diffs are not rendered by default.

‎config/version-info.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,5 +50,6 @@
5050
"2.5.0": "2.5.0",
5151
"2.6.0": "2.6.2",
5252
"2.7.0": "2.7.0",
53-
"2.8.0": "2.8.0"
53+
"2.8.0": "2.8.0",
54+
"2.9.0": "2.9.0"
5455
}

‎package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@
4343
"@storybook/react": "8.6.11",
4444
"@storybook/react-vite": "8.6.11",
4545
"@storybook/theming": "8.6.11",
46-
"@ui5/webcomponents": "2.8.0",
47-
"@ui5/webcomponents-ai": "2.8.0",
48-
"@ui5/webcomponents-compat": "2.8.0",
49-
"@ui5/webcomponents-fiori": "2.8.0",
50-
"@ui5/webcomponents-icons": "2.8.0",
46+
"@ui5/webcomponents": "2.9.0",
47+
"@ui5/webcomponents-ai": "2.9.0",
48+
"@ui5/webcomponents-compat": "2.9.0",
49+
"@ui5/webcomponents-fiori": "2.9.0",
50+
"@ui5/webcomponents-icons": "2.9.0",
5151
"react": "^19.0.0",
5252
"react-dom": "^19.0.0",
5353
"remark-gfm": "^4.0.0",
@@ -69,7 +69,7 @@
6969
"@types/node": "^22.0.0",
7070
"@types/react": "^19.0.1",
7171
"@types/react-dom": "^19.0.1",
72-
"@ui5/webcomponents-tools": "2.8.0",
72+
"@ui5/webcomponents-tools": "2.9.0",
7373
"@vitejs/plugin-react": "^4.2.0",
7474
"chromatic": "^11.0.0",
7575
"cssnano": "^7.0.0",

‎packages/ai/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"@ui5/webcomponents-react-base": "workspace:~"
3434
},
3535
"peerDependencies": {
36-
"@ui5/webcomponents-ai": "~2.8.0",
36+
"@ui5/webcomponents-ai": "~2.9.0",
3737
"react": "^18 || ^19"
3838
},
3939
"publishConfig": {

‎packages/base/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
},
3333
"peerDependencies": {
3434
"@types/react": "*",
35-
"@ui5/webcomponents-base": "~2.8.0",
35+
"@ui5/webcomponents-base": "~2.9.0",
3636
"react": "^18 || ^19"
3737
},
3838
"peerDependenciesMeta": {

‎packages/charts/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
"recharts": "2.15.2"
4040
},
4141
"peerDependencies": {
42-
"@ui5/webcomponents-react": "~2.8.0",
43-
"@ui5/webcomponents-react-base": "~2.8.0",
42+
"@ui5/webcomponents-react": "~2.9.0",
43+
"@ui5/webcomponents-react-base": "~2.9.0",
4444
"react": "^18 || ^19"
4545
},
4646
"publishConfig": {

‎packages/compat/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@
4141
"peerDependencies": {
4242
"@types/react": "*",
4343
"@types/react-dom": "*",
44-
"@ui5/webcomponents-compat": "~2.8.0",
45-
"@ui5/webcomponents-react": "~2.8.0",
44+
"@ui5/webcomponents-compat": "~2.9.0",
45+
"@ui5/webcomponents-react": "~2.9.0",
4646
"react": "^18 || ^19",
4747
"react-dom": "^18 || ^19"
4848
},

‎packages/compat/src/components/Toolbar/OverflowPopover.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,6 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
7575

7676
const handleBeforeOpen = () => {
7777
if (toggleBtnRef.current) {
78-
//@ts-expect-error: for some reason these optional attributes are mandatory which is not expected
7978
toggleBtnRef.current.accessibilityAttributes = { expanded: true, hasPopup: 'menu' };
8079
}
8180
};
@@ -85,7 +84,6 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
8584

8685
const handleClose = (e) => {
8786
if (toggleBtnRef.current) {
88-
//@ts-expect-error: for some reason these optional attributes are mandatory which is not expected
8987
toggleBtnRef.current.accessibilityAttributes = { expanded: false, hasPopup: 'menu' };
9088
}
9189
stopPropagation(e);
@@ -96,7 +94,6 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
9694
const tagName = getUi5TagWithSuffix('ui5-toggle-button');
9795
void customElements.whenDefined(tagName).then(() => {
9896
if (toggleBtnRef.current) {
99-
//@ts-expect-error: for some reason these optional attributes are mandatory which is not expected
10097
toggleBtnRef.current.accessibilityAttributes = { expanded: pressed, hasPopup: 'menu' };
10198
}
10299
});

‎packages/cypress-commands/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
"clean": "rimraf dist api-commands.json api-queries.json"
2424
},
2525
"peerDependencies": {
26-
"@ui5/webcomponents": "~2.8.0",
27-
"@ui5/webcomponents-base": "~2.8.0",
26+
"@ui5/webcomponents": "~2.9.0",
27+
"@ui5/webcomponents-base": "~2.9.0",
2828
"cypress": "^12 || ^13 || ^14"
2929
},
3030
"peerDependenciesMeta": {

‎packages/cypress-commands/src/commands.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,8 @@ declare global {
9999
*
100100
* __Note:__ The popover must be visible, otherwise it can lead to unwanted side effects.
101101
*
102+
* __Note:__ Currently `Select` doesn't support `cy.click()` on `ui5-options` (or elements in the shadow root), because of this the option is now selected via "Enter" press.
103+
*
102104
* @param text text of the item inside the popover that should be clicked
103105
* @param options Cypress.ClickOptions
104106
* @example cy.get('[ui5-select]').clickDropdownMenuItemByText('Option2');
@@ -111,6 +113,8 @@ declare global {
111113
*
112114
* __Note:__ The popover must be visible, otherwise it can lead to unwanted side effects.
113115
*
116+
* __Note:__ Currently `Select` doesn't support `cy.click()` on `ui5-options` (or elements in the shadow root), because of this the option is now selected via "Enter" press.
117+
*
114118
* @example cy.get('[ui5-option]').clickDropdownMenuItem();
115119
*/
116120
clickDropdownMenuItem(options?: Partial<ClickOptions>): Chainable<Element>;
@@ -210,7 +214,12 @@ Cypress.Commands.add('clickDropdownMenuItem', { prevSubject: 'element' }, (subje
210214
cy.wrap(subject).then(([$option]) => {
211215
const domRef = ($option as UI5Element).getDomRef();
212216
cy.wrap(domRef).focus();
213-
cy.wrap(domRef).click(options);
217+
if ($option.hasAttribute('ui5-option')) {
218+
//todo: check if this can be refactored to use `click()` again.
219+
cy.wrap(domRef).type('{enter}');
220+
} else {
221+
cy.wrap(domRef).click(options);
222+
}
214223
});
215224
});
216225

‎packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ describe('UI5 Web Components - Child Commands', () => {
220220
];
221221

222222
components.forEach((component) => {
223-
it(component.key, () => {
223+
it(component.key!, () => {
224224
changeSpy = cy.spy().as('change');
225225
cy.mount(component);
226226
cy.get(`[${component.key}]`).openDropDownByClick();

‎packages/main/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,10 @@
5757
"peerDependencies": {
5858
"@types/react": "*",
5959
"@types/react-dom": "*",
60-
"@ui5/webcomponents": "~2.8.0",
61-
"@ui5/webcomponents-base": "~2.8.0",
62-
"@ui5/webcomponents-fiori": "~2.8.0",
63-
"@ui5/webcomponents-icons": "~2.8.0",
60+
"@ui5/webcomponents": "~2.9.0",
61+
"@ui5/webcomponents-base": "~2.9.0",
62+
"@ui5/webcomponents-fiori": "~2.9.0",
63+
"@ui5/webcomponents-icons": "~2.9.0",
6464
"react": "^18 || ^19",
6565
"react-dom": "^18 || ^19"
6666
},

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,15 @@ const kitchenSinkArgs = {
3333
columns: [
3434
{
3535
Header: 'Name',
36+
width: 500,
3637
headerTooltip: 'Full Name', // A more extensive description!
3738
accessor: 'name', // String-based value accessors!
3839
autoResizable: true // Double clicking the resize bar auto resizes the column!
3940
},
4041
{
4142
Header: 'Age',
4243
accessor: 'age',
44+
width: 100,
4345
autoResizable: true,
4446
hAlign: TextAlign.End,
4547
disableGroupBy: true,
@@ -50,6 +52,7 @@ const kitchenSinkArgs = {
5052
{
5153
Header: 'Friend Name',
5254
accessor: 'friend.name',
55+
width: 300,
5356
autoResizable: true
5457
},
5558
{

‎packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const Expandable = (props: ExpandableProps) => {
7575
design={ButtonDesign.Transparent}
7676
className={classNames.button}
7777
onClick={rowProps.onClick}
78-
accessibilityAttributes={{ expanded: row.isExpanded, hasPopup: false, controls: undefined }}
78+
accessibilityAttributes={{ expanded: row.isExpanded }}
7979
onFocus={(e: FocusEvent<ButtonDomRef>) => {
8080
e.target.accessibleName = row.isExpanded
8181
? translatableTexts.collapseNodeA11yText

‎packages/main/src/components/FilterBar/FilterBar.cy.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@ describe('FilterBar.cy.tsx', () => {
178178
onRestore={restore}
179179
/>
180180
);
181+
cy.wait(100);
181182

182183
cy.findAllByText('INPUT').should('have.length', 1);
183184
cy.findAllByText('SWITCH').should('have.length', 1);
@@ -479,7 +480,7 @@ describe('FilterBar.cy.tsx', () => {
479480

480481
cy.get('[data-component-name="FilterBarDialogTable"][data-is-grouped]')
481482
.shadow()
482-
.find('#nodata-row')
483+
.find('#no-data-row')
483484
.should('have.css', 'display', 'none');
484485

485486
cy.get('[data-component-name="FilterBarDialogTable"]')
@@ -550,7 +551,7 @@ describe('FilterBar.cy.tsx', () => {
550551
cy.get('[ui5-table-row]').should('have.length', 1);
551552

552553
cy.get('[data-component-name="FilterBarDialogSearchInput"]').typeIntoUi5Input('a');
553-
cy.get('[ui5-table-row]').should('have.id', 'nodata-row').should('have.length', 1);
554+
cy.get('[ui5-table-row]').should('have.id', 'no-data-row').should('have.length', 1);
554555
cy.get('@search').should('have.callCount', 3);
555556

556557
cy.get('[data-component-name="FilterBarDialogSearchInput"]').typeIntoUi5Input('{selectall}{backspace}');
@@ -560,21 +561,21 @@ describe('FilterBar.cy.tsx', () => {
560561

561562
cy.get('[accessible-name="Group View"]').click();
562563
cy.get('[ui5-table-row]').should('have.length', 2);
563-
cy.get('[ui5-table-row]').eq(0).should('have.id', 'nodata-row');
564+
cy.get('[ui5-table-row]').eq(0).should('have.id', 'no-data-row');
564565

565566
cy.get('[data-component-name="FilterBarDialogSearchInput"]').typeIntoUi5Input('{selectall}{backspace}');
566567

567568
cy.get('[data-component-name="FilterBarDialogSearchInput"]').typeIntoUi5Input('a');
568569
cy.get('[ui5-table-row]').should('have.length', 3);
569-
cy.get('[ui5-table-row]').eq(0).should('have.id', 'nodata-row');
570+
cy.get('[ui5-table-row]').eq(0).should('have.id', 'no-data-row');
570571

571572
cy.get('[data-component-name="FilterBarDialogSearchInput"]').typeIntoUi5Input('A');
572573
cy.get('[ui5-table-row]').should('have.length', 2);
573-
cy.get('[ui5-table-row]').eq(0).should('have.id', 'nodata-row');
574+
cy.get('[ui5-table-row]').eq(0).should('have.id', 'no-data-row');
574575

575576
cy.get('[data-component-name="FilterBarDialogSearchInput"]').typeIntoUi5Input('a');
576577
cy.get('[ui5-table-row]').should('have.length', 1);
577-
cy.get('[ui5-table-row]').eq(0).should('have.id', 'nodata-row');
578+
cy.get('[ui5-table-row]').eq(0).should('have.id', 'no-data-row');
578579

579580
cy.get('[data-component-name="FilterBarDialogSearchInput"]').typeIntoUi5Input('{selectall}{backspace}');
580581
cy.get('[data-component-name="FilterBarDialogSearchInput"]').typeIntoUi5Input('b');

‎packages/main/src/components/FilterBar/FilterDialog.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ addCustomCSSWithScoping(
7777
:host([data-component-name="FilterBarDialogPanelTable"][data-with-value="false"]) #table {
7878
grid-template-columns: var(--_ui5wcr-CheckBoxWidthHeight) minmax(3rem, auto) minmax(3rem, 25%) !important;
7979
}
80-
:host([data-component-name="FilterBarDialogTable"][data-is-grouped]) #nodata-row {
80+
:host([data-component-name="FilterBarDialogTable"][data-is-grouped]) #no-data-row {
8181
display: none;
8282
}
8383
`
@@ -611,7 +611,7 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
611611
data-component-name="FilterBarDialogTable"
612612
data-is-grouped={!isListView}
613613
data-with-value={`${showValues}`}
614-
nodata={!isListView ? <span /> : undefined}
614+
noData={!isListView ? <span /> : undefined}
615615
tabIndex={!isListView ? -1 : undefined}
616616
features={
617617
<>

‎packages/main/src/components/ObjectPage/ObjectPage.cy.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1219,7 +1219,6 @@ describe('ObjectPage', () => {
12191219
const TestComp = (props: ObjectPagePropTypes) => {
12201220
const [selectedSection, setSelectedSection] = useState(props.selectedSectionId);
12211221
const [selectedSubSection, setSelectedSubSection] = useState(props.selectedSubSectionId);
1222-
12231222
return (
12241223
<>
12251224
<button
@@ -1251,6 +1250,7 @@ describe('ObjectPage', () => {
12511250
[{ titleArea: DPTitle, headerArea: DPContent }, { titleArea: DPTitle }, { headerArea: DPContent }, {}].forEach(
12521251
(props: ObjectPagePropTypes) => {
12531252
cy.mount(<TestComp {...props} selectedSubSectionId={`employment-job-relationship`} />);
1253+
12541254
cy.findByText('employment-job-relationship-content').should('be.visible');
12551255
cy.findByText('Job Information').should('not.be.visible');
12561256
cy.get('[ui5-tabcontainer]').findUi5TabByText('Employment').should('have.attr', 'aria-selected', 'true');
@@ -1260,8 +1260,10 @@ describe('ObjectPage', () => {
12601260
cy.findByText('test-content').should('not.be.visible');
12611261
cy.get('[ui5-tabcontainer]').findUi5TabByText('Personal').should('have.attr', 'aria-selected', 'true');
12621262

1263+
cy.wait(100);
12631264
cy.findByText('Select Goals').click();
12641265
cy.findByText('goals-content').should('be.visible');
1266+
12651267
cy.findByText('personal-connect-content').should('not.be.visible');
12661268
cy.get('[ui5-tabcontainer]').findUi5TabByText('Goals').should('have.attr', 'aria-selected', 'true');
12671269

‎packages/main/src/components/ObjectPage/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -298,9 +298,10 @@ const ObjectPage = forwardRef<ObjectPageDomRef, ObjectPagePropTypes>((props, ref
298298

299299
useEffect(() => {
300300
if (!isMounted) {
301-
setIsMounted(true);
301+
requestAnimationFrame(() => setIsMounted(true));
302302
return;
303303
}
304+
304305
setSelectedSubSectionId(props.selectedSubSectionId);
305306
if (props.selectedSubSectionId) {
306307
isProgrammaticallyScrolled.current = true;

‎packages/main/src/webComponents/Avatar/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ interface AvatarAttributes {
3131

3232
/**
3333
* Defines the background color of the desired image.
34-
* @default "Accent6"
34+
* If `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.
35+
* @default "Auto"
3536
*/
3637
colorScheme?: AvatarColorScheme | keyof typeof AvatarColorScheme;
3738

‎packages/main/src/webComponents/ComboBox/index.tsx

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,14 @@ interface ComboBoxAttributes {
5959
*/
6060
noTypeahead?: boolean;
6161

62+
/**
63+
* Indicates whether the items picker is open.
64+
*
65+
* **Note:** Available since [v2.9.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.9.0) of **@ui5/webcomponents**.
66+
* @default false
67+
*/
68+
open?: boolean;
69+
6270
/**
6371
* Defines a short hint intended to aid the user with data entry when the
6472
* component has no value.
@@ -112,7 +120,9 @@ interface ComboBoxPropTypes
112120
| 'icon'
113121
| 'valueStateMessage'
114122
| 'onChange'
123+
| 'onClose'
115124
| 'onInput'
125+
| 'onOpen'
116126
| 'onSelectionChange'
117127
> {
118128
/**
@@ -156,6 +166,17 @@ interface ComboBoxPropTypes
156166
*/
157167
onChange?: (event: Ui5CustomEvent<ComboBoxDomRef>) => void;
158168

169+
/**
170+
* Fired when the dropdown is closed.
171+
*
172+
* **Note:** Available since [v2.9.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.9.0) of **@ui5/webcomponents**.
173+
*
174+
* | cancelable | bubbles |
175+
* | :--------: | :-----: |
176+
* | ❌|❌|
177+
*/
178+
onClose?: (event: Ui5CustomEvent<ComboBoxDomRef>) => void;
179+
159180
/**
160181
* Fired when typing in input or clear icon is pressed.
161182
*
@@ -167,6 +188,17 @@ interface ComboBoxPropTypes
167188
*/
168189
onInput?: (event: Ui5CustomEvent<ComboBoxDomRef>) => void;
169190

191+
/**
192+
* Fired when the dropdown is opened.
193+
*
194+
* **Note:** Available since [v2.9.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.9.0) of **@ui5/webcomponents**.
195+
*
196+
* | cancelable | bubbles |
197+
* | :--------: | :-----: |
198+
* | ❌|✅|
199+
*/
200+
onOpen?: (event: Ui5CustomEvent<ComboBoxDomRef>) => void;
201+
170202
/**
171203
* Fired when selection is changed by user interaction
172204
*
@@ -210,9 +242,9 @@ interface ComboBoxPropTypes
210242
const ComboBox = withWebComponent<ComboBoxPropTypes, ComboBoxDomRef>(
211243
'ui5-combobox',
212244
['accessibleName', 'accessibleNameRef', 'filter', 'name', 'placeholder', 'value', 'valueState'],
213-
['disabled', 'loading', 'noTypeahead', 'readonly', 'required', 'showClearIcon'],
245+
['disabled', 'loading', 'noTypeahead', 'open', 'readonly', 'required', 'showClearIcon'],
214246
['icon', 'valueStateMessage'],
215-
['change', 'input', 'selection-change']
247+
['change', 'close', 'input', 'open', 'selection-change']
216248
);
217249

218250
ComboBox.displayName = 'ComboBox';

‎packages/main/src/webComponents/Icon/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ interface IconAttributes {
2929
* Defines the mode of the component.
3030
*
3131
* **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**.
32-
* @default "Image"
32+
* @default "Decorative"
3333
*/
3434
mode?: IconMode | keyof typeof IconMode;
3535

0 commit comments

Comments
 (0)