feat: update to UI5 Web Components 2.5.0

.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';
 

.storybook/manager-head.html

@@ -55,6 +55,7 @@
   #data-display-table::after,
   #inputs-tokenizer::after,
   #layouts-floorplans-form::after,
+  #modals-popovers-usermenu::after,
   #charts-timelinechart::after {
     content: '(experimental)';
     overflow: hidden;

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"
 }

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",

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": {

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": {

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"
   },

packages/cypress-commands/package.json

@@ -23,8 +23,18 @@
     "clean": "rimraf dist api.json"
   },
   "peerDependencies": {
+    "@ui5/webcomponents": "~2.5.0",
+    "@ui5/webcomponents-base": "~2.5.0",
     "cypress": "^12.0.0 || ^13.0.0"
   },
+  "peerDependenciesMeta": {
+    "@ui5/webcomponents": {
+      "optional": true
+    },
+    "@ui5/webcomponents-base": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

packages/cypress-commands/src/commands.ts

@@ -1,3 +1,5 @@
+import type UI5Element from '@ui5/webcomponents-base/dist/UI5Element.js';
+
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
@@ -9,12 +11,14 @@ declare global {
        * @example cy.get('[ui5-input]').typeIntoUi5Input('Hello World');
        */
       typeIntoUi5Input(text: string, options?: Partial<TypeOptions>): Chainable<Element>;
+
       /**
        * Clears a value from ui5-webcomponent that offers a typeable input field.
        *
        * @example cy.get('[ui5-input]').clearUi5Input();
        */
       clearUi5Input(options?: Partial<ClearOptions>): Chainable<Element>;
+
       /**
        * Types a value with a delay into an ui5-webcomponent that offers a typeable input field.
        *
@@ -189,30 +193,24 @@ Cypress.Commands.add('clickUi5SelectOption', { prevSubject: 'element' }, (subjec
 });
 
 Cypress.Commands.add('clickDropdownMenuItemByText', { prevSubject: 'element' }, (subject, text, options = {}) => {
-  cy.wrap(subject)
-    .find('[ui5-responsive-popover]')
-    .then(($popover) => {
-      cy.wrap($popover).should('have.attr', 'open');
-      // necessary as otherwise focusing the ui5-li is flaky
-      cy.wait(300);
-      cy.wrap($popover)
-        .contains(text)
-        .then(($li) => {
-          $li.get(0).focus();
-          cy.wrap($li)
-            .find('li')
-            .click({ force: true, ...options });
-        });
-    });
+  cy.wrap(subject).find('[ui5-responsive-popover]').should('have.attr', 'open');
+  cy.wrap(subject).then(([$dropdown]) => {
+    switch (true) {
+      case $dropdown.hasAttribute('ui5-select'):
+        cy.wrap($dropdown).contains(text).clickDropdownMenuItem(options);
+        break;
+      default:
+        cy.wrap($dropdown).get(`[text="${text}"]`).clickDropdownMenuItem(options);
+        break;
+    }
+  });
 });
 
 Cypress.Commands.add('clickDropdownMenuItem', { prevSubject: 'element' }, (subject, options = {}) => {
-  cy.wrap(subject).then(($option) => {
-    // @ts-expect-error: ui5-webcomponent types are not bundled in
-    const domRef = $option.get(0).getDomRef();
-    cy.wrap(domRef)
-      .find('li')
-      .click({ force: true, ...options });
+  cy.wrap(subject).then(([$option]) => {
+    const domRef = ($option as UI5Element).getDomRef();
+    cy.wrap(domRef).focus();
+    cy.wrap(domRef).click(options);
   });
 });
 

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

@@ -194,72 +194,95 @@ describe('UI5 Web Components - Child Commands', () => {
     cy.get('@select').should('have.been.calledTwice');
   });
 
-  it('clickDropdownMenuItemByText', () => {
+  describe('clickDropdownMenuItemByText', () => {
     const selectItemText =
       'This very long item should be selected by first focusing it and then pressing it. A focus is applied first, because otherwise it wouldnt be visible. Strangely, longer items tend to result in occasional test failures compared to smaller ones, which is why this item has this text.';
-    const changeSpy = cy.spy().as('change');
-    let callCounter = 1;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let changeSpy = (e: unknown) => {};
+    const handler = (e: unknown) => {
+      changeSpy(e);
+    };
     const components = [
-      <ComboBox key="ui5-combobox" onSelectionChange={changeSpy}>
+      <Select key="ui5-select" onChange={handler}>
+        {...new Array(5).fill(<Option value="Item">Value</Option>)}
+        <Option value={selectItemText} data-testid="selectItem">
+          {selectItemText}
+        </Option>
+      </Select>,
+      <ComboBox key="ui5-combobox" onSelectionChange={handler}>
         {...new Array(30).fill(<ComboBoxItem text="Item" />)}
         <ComboBoxItem text={selectItemText} />
       </ComboBox>,
-      <MultiComboBox key="ui5-multi-combobox" onSelectionChange={changeSpy}>
+      <MultiComboBox key="ui5-multi-combobox" onSelectionChange={handler}>
         {...new Array(30).fill(<MultiComboBoxItem text="Item" />)}
         <MultiComboBoxItem text={selectItemText} />
       </MultiComboBox>
     ];
 
     components.forEach((component) => {
-      cy.mount(component);
-      cy.get(`[${component.key}]`).openDropDownByClick();
-      cy.get(`[${component.key}]`).clickDropdownMenuItemByText(selectItemText);
+      it(component.key, () => {
+        changeSpy = cy.spy().as('change');
+        cy.mount(component);
+        cy.get(`[${component.key}]`).openDropDownByClick();
+        cy.get(`[${component.key}]`).clickDropdownMenuItemByText(selectItemText);
 
-      switch (component.key) {
-        case 'ui5-combobox':
-          cy.get(`[${component.key}]`).should('have.value', selectItemText);
-          break;
-        case 'ui5-multi-combobox':
-          cy.get(`[${component.key}]`).find('[ui5-token]').contains(selectItemText);
-          break;
-      }
+        switch (component.key) {
+          case 'ui5-combobox':
+          case 'ui5-select':
+            cy.get(`[${component.key}]`).should('have.value', selectItemText);
+            break;
+          case 'ui5-multi-combobox':
+            cy.get(`[${component.key}]`).find('[ui5-token]').contains(selectItemText);
+            break;
+        }
 
-      cy.get('@change').should('have.callCount', callCounter);
-      callCounter++;
-      cy.wait(200);
+        cy.get('@change').should('have.been.calledOnce');
+        cy.wait(200);
+      });
     });
   });
 
-  it('clickDropDownMenuItem', () => {
+  describe('clickDropDownMenuItem', () => {
     const selectItemText = 'Select me';
-    const changeSpy = cy.spy().as('change');
-    let callCounter = 1;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let changeSpy = (e: unknown) => {};
+    const handler = (e: unknown) => {
+      changeSpy(e);
+    };
     const components = [
-      <ComboBox key="ui5-combobox" onSelectionChange={changeSpy}>
+      <Select key="ui5-select" onChange={handler}>
+        {...new Array(5).fill(<Option value="Item">Value</Option>)}
+        <Option value={selectItemText} data-testid="selectItem">
+          {selectItemText}
+        </Option>
+      </Select>,
+      <ComboBox key="ui5-combobox" onSelectionChange={handler}>
         {...new Array(5).fill(<ComboBoxItem text="Item" />)}
         <ComboBoxItem text={selectItemText} data-testid="selectItem" />
       </ComboBox>,
-      <MultiComboBox key="ui5-multi-combobox" onSelectionChange={changeSpy}>
+      <MultiComboBox key="ui5-multi-combobox" onSelectionChange={handler}>
         {...new Array(5).fill(<MultiComboBoxItem text="Item" />)}
         <MultiComboBoxItem text={selectItemText} data-testid="selectItem" />
       </MultiComboBox>
     ];
 
     components.forEach((component) => {
-      cy.mount(component);
-      cy.get(`[${component.key}]`).openDropDownByClick();
-      cy.get('[ui5-responsive-popover][open]').should('be.visible');
-      cy.get(`[data-testid="selectItem"]`).clickDropdownMenuItem();
+      it(component.key, () => {
+        changeSpy = cy.spy().as('change');
+        cy.mount(component);
+        cy.get(`[${component.key}]`).openDropDownByClick();
+        cy.get('[ui5-responsive-popover][open]').should('exist');
+        cy.get(`[data-testid="selectItem"]`).clickDropdownMenuItem();
 
-      if (component.key === 'ui5-combobox') {
-        cy.get(`[${component.key}]`).should('have.value', selectItemText);
-      } else if (component.key === 'ui5-multi-combobox') {
-        cy.get(`[${component.key}]`).find('[ui5-token]').contains(selectItemText);
-      }
+        if (component.key === 'ui5-combobox' || component.key === 'ui5-select') {
+          cy.get(`[${component.key}]`).should('have.value', selectItemText);
+        } else if (component.key === 'ui5-multi-combobox') {
+          cy.get(`[${component.key}]`).find('[ui5-token]').contains(selectItemText);
+        }
 
-      cy.get('@change').should('have.callCount', callCounter);
-      callCounter++;
-      cy.wait(200);
+        cy.get('@change').should('have.been.calledOnce');
+        cy.wait(200);
+      });
     });
   });
 

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"
   },

packages/main/src/components/Modals/index.tsx

@@ -1,9 +1,11 @@
 'use client';
 
-import type { RefObject } from 'react';
+import { useIsomorphicLayoutEffect, useSyncRef } from '@ui5/webcomponents-react-base';
+import type { MutableRefObject } from 'react';
 import { createRef, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import { getRandomId } from '../../internal/getRandomId.js';
+import type { IModal } from '../../internal/ModalStore.js';
 import { ModalStore } from '../../internal/ModalStore.js';
 import type {
   DialogDomRef,
@@ -22,7 +24,7 @@ import type { MessageBoxPropTypes } from '../MessageBox/index.js';
 import { MessageBox } from '../MessageBox/index.js';
 
 type ModalReturnType<DomRef> = {
-  ref: RefObject<DomRef>;
+  ref: MutableRefObject<DomRef>;
 };
 
 type ClosableModalReturnType<DomRef> = ModalReturnType<DomRef> & {
@@ -72,7 +74,6 @@ function showPopoverFn(
     Component: Popover,
     props: {
       ...props,
-
       open: true,
       onClose: (event) => {
         if (typeof props.onClose === 'function') {
@@ -218,6 +219,24 @@ function showToastFn(props: ToastPropTypes, container?: Element | DocumentFragme
   };
 }
 
+// todo: remove this once it's possible initializing popovers with `open=true` again
+function ModalComponent({ modal }: { modal: IModal }) {
+  const [componentRef, modalsRef] = useSyncRef(modal.ref);
+  useIsomorphicLayoutEffect(() => {
+    const modalElement = modalsRef.current as PopoverDomRef;
+    if (modalElement) {
+      requestAnimationFrame(() => {
+        modalElement.open = true;
+      });
+    }
+  }, []);
+
+  const { open: _0, ...props } = modal.props;
+
+  // @ts-expect-error: ref is supported by all supported modals
+  return <modal.Component {...props} ref={componentRef} data-id={modal.id} />;
+}
+
 /**
  * Utility class for opening modals in an imperative way.
  *
@@ -238,14 +257,9 @@ export function Modals() {
       {modals.map((modal) => {
         if (modal?.Component) {
           if (modal.container) {
-            return createPortal(
-              // @ts-expect-error: ref is supported by all supported modals
-              <modal.Component {...modal.props} ref={modal.ref} key={modal.id} data-id={modal.id} />,
-              modal.container
-            );
+            return createPortal(<ModalComponent modal={modal} key={modal.id} />, modal.container);
           }
-          // @ts-expect-error: ref is supported by all supported modals
-          return <modal.Component {...modal.props} ref={modal.ref} key={modal.id} data-id={modal.id} />;
+          return <ModalComponent modal={modal} key={modal.id} />;
         }
       })}
     </>

packages/main/src/internal/ModalStore.ts

@@ -12,7 +12,7 @@ function getStyleStoreSymbol() {
   return Symbol.for(`@ui5/webcomponents-react/Modals-${getCurrentRuntimeIndex()}`);
 }
 
-type IModal = {
+export type IModal = {
   Component: ComponentType;
   props: Record<string, unknown>;
   ref: RefObject<unknown> | RefCallback<unknown>;