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

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/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/webComponents/AvatarGroup/index.tsx

@@ -77,7 +77,7 @@ interface AvatarGroupPropTypes
    *
    * | cancelable | bubbles |
    * | :--------: | :-----: |
-   * | ❌|✅|
+   * | ❌|❌|
    */
   onClick?: (event: Ui5CustomEvent<AvatarGroupDomRef, AvatarGroupClickEventDetail>) => void;
 
@@ -87,7 +87,7 @@ interface AvatarGroupPropTypes
    *
    * | cancelable | bubbles |
    * | :--------: | :-----: |
-   * | ❌|✅|
+   * | ❌|❌|
    */
   onOverflow?: (event: Ui5CustomEvent<AvatarGroupDomRef>) => void;
 }

packages/main/src/webComponents/Button/index.tsx

@@ -28,6 +28,14 @@ interface ButtonAttributes {
    */
   accessibilityAttributes?: ButtonAccessibilityAttributes;
 
+  /**
+   * Defines the accessible description of the component.
+   *
+   * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleDescription?: string | undefined;
+
   /**
    * Defines the accessible ARIA name of the component.
    * @default undefined
@@ -170,6 +178,7 @@ const Button = withWebComponent<ButtonPropTypes, ButtonDomRef>(
   'ui5-button',
   [
     'accessibilityAttributes',
+    'accessibleDescription',
     'accessibleName',
     'accessibleNameRef',
     'accessibleRole',

packages/main/src/webComponents/CardHeader/index.tsx

@@ -13,7 +13,7 @@ interface CardHeaderAttributes {
 
   /**
    * Defines if the component would be interactive,
-   * e.g gets hover effect, gets focus outline and `click` event is fired, when pressed.
+   * e.g gets hover effect and `click` event is fired, when pressed.
    * @default false
    */
   interactive?: boolean;

packages/main/src/webComponents/ColorPalette/index.tsx

@@ -20,7 +20,7 @@ interface ColorPalettePropTypes extends ColorPaletteAttributes, Omit<CommonProps
    *
    * | cancelable | bubbles |
    * | :--------: | :-----: |
-   * | ❌|✅|
+   * | ❌|❌|
    */
   onItemClick?: (event: Ui5CustomEvent<ColorPaletteDomRef, ColorPaletteItemClickEventDetail>) => void;
 }

packages/main/src/webComponents/ColorPicker/index.tsx

@@ -15,6 +15,14 @@ interface ColorPickerAttributes {
    */
   name?: string | undefined;
 
+  /**
+   * When set to `true`, the alpha slider and inputs for RGB values will not be displayed.
+   *
+   * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**.
+   * @default false
+   */
+  simplified?: boolean;
+
   /**
    * Defines the currently selected color of the component.
    *
@@ -60,7 +68,7 @@ interface ColorPickerPropTypes
 const ColorPicker = withWebComponent<ColorPickerPropTypes, ColorPickerDomRef>(
   'ui5-color-picker',
   ['name', 'value'],
-  [],
+  ['simplified'],
   [],
   ['change']
 );

packages/main/src/webComponents/ComboBoxItem/index.tsx

@@ -26,7 +26,6 @@ interface ComboBoxItemPropTypes extends ComboBoxItemAttributes, Omit<CommonProps
  * The `ComboBoxItem` represents the item for a `ComboBox`.
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
- * @abstract
  */
 const ComboBoxItem = withWebComponent<ComboBoxItemPropTypes, ComboBoxItemDomRef>(
   'ui5-cb-item',

packages/main/src/webComponents/ComboBoxItemGroup/index.tsx

@@ -1,13 +1,20 @@
 'use client';
 
 import '@ui5/webcomponents/dist/ComboBoxItemGroup.js';
+import type { ListItemGroupMoveEventDetail } from '@ui5/webcomponents/dist/ListItemGroup.js';
 import type { ReactNode } from 'react';
 import { withWebComponent } from '../../internal/withWebComponent.js';
-import type { CommonProps, Ui5DomRef } from '../../types/index.js';
+import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js';
 
 interface ComboBoxItemGroupAttributes {
   /**
-   * Defines the text of the component.
+   * Defines the accessible name of the header.
+   * @default undefined
+   */
+  headerAccessibleName?: string | undefined;
+
+  /**
+   * Defines the header text of the <code>ui5-li-group</code>.
    * @default undefined
    */
   headerText?: string | undefined;
@@ -17,11 +24,51 @@ interface ComboBoxItemGroupDomRef extends Required<ComboBoxItemGroupAttributes>,
 
 interface ComboBoxItemGroupPropTypes
   extends ComboBoxItemGroupAttributes,
-    Omit<CommonProps, keyof ComboBoxItemGroupAttributes | 'children'> {
+    Omit<CommonProps, keyof ComboBoxItemGroupAttributes | 'children' | 'header' | 'onMove' | 'onMoveOver'> {
   /**
    * Defines the items of the <code>ui5-cb-item-group</code>.
    */
   children?: ReactNode | ReactNode[];
+
+  /**
+   * Defines the header of the component.
+   *
+   * **Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.
+   *
+   * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="header"`).
+   * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
+   *
+   * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
+   * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   */
+  header?: UI5WCSlotsNode;
+  /**
+   * Fired when a movable list item is dropped onto a drop target.
+   *
+   * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
+   *
+   * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
+   */
+  onMove?: (event: Ui5CustomEvent<ComboBoxItemGroupDomRef, ListItemGroupMoveEventDetail>) => void;
+
+  /**
+   * Fired when a movable list item is moved over a potential drop target during a dragging operation.
+   *
+   * If the new position is valid, prevent the default action of the event using `preventDefault()`.
+   *
+   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
+   *
+   * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ✅|✅|
+   */
+  onMoveOver?: (event: Ui5CustomEvent<ComboBoxItemGroupDomRef, ListItemGroupMoveEventDetail>) => void;
 }
 
 /**
@@ -33,10 +80,10 @@ interface ComboBoxItemGroupPropTypes
  */
 const ComboBoxItemGroup = withWebComponent<ComboBoxItemGroupPropTypes, ComboBoxItemGroupDomRef>(
   'ui5-cb-item-group',
-  ['headerText'],
-  [],
+  ['headerAccessibleName', 'headerText'],
   [],
-  []
+  ['header'],
+  ['move-over', 'move']
 );
 
 ComboBoxItemGroup.displayName = 'ComboBoxItemGroup';

packages/main/src/webComponents/DatePicker/index.tsx

@@ -201,13 +201,13 @@ interface DatePickerPropTypes
   onChange?: (event: Ui5CustomEvent<DatePickerDomRef, DatePickerChangeEventDetail>) => void;
 
   /**
-   * Fired after the value-help dialog of the component is closed.
+   * Fired after the component's picker is closed.
    *
    * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
    *
    * | cancelable | bubbles |
    * | :--------: | :-----: |
-   * | ❌|✅|
+   * | ❌|❌|
    */
   onClose?: (event: Ui5CustomEvent<DatePickerDomRef>) => void;
 
@@ -223,13 +223,13 @@ interface DatePickerPropTypes
   onInput?: (event: Ui5CustomEvent<DatePickerDomRef, DatePickerInputEventDetail>) => void;
 
   /**
-   * Fired after the value-help dialog of the component is opened.
+   * Fired after the component's picker is opened.
    *
    * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
    *
    * | cancelable | bubbles |
    * | :--------: | :-----: |
-   * | ❌|✅|
+   * | ❌|❌|
    */
   onOpen?: (event: Ui5CustomEvent<DatePickerDomRef>) => void;
 

packages/main/src/webComponents/DateRangePicker/index.tsx

@@ -223,13 +223,13 @@ interface DateRangePickerPropTypes
   onChange?: (event: Ui5CustomEvent<DateRangePickerDomRef, DatePickerChangeEventDetail>) => void;
 
   /**
-   * Fired after the value-help dialog of the component is closed.
+   * Fired after the component's picker is closed.
    *
    * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
    *
    * | cancelable | bubbles |
    * | :--------: | :-----: |
-   * | ❌|✅|
+   * | ❌|❌|
    */
   onClose?: (event: Ui5CustomEvent<DateRangePickerDomRef>) => void;
 
@@ -245,13 +245,13 @@ interface DateRangePickerPropTypes
   onInput?: (event: Ui5CustomEvent<DateRangePickerDomRef, DatePickerInputEventDetail>) => void;
 
   /**
-   * Fired after the value-help dialog of the component is opened.
+   * Fired after the component's picker is opened.
    *
    * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
    *
    * | cancelable | bubbles |
    * | :--------: | :-----: |
-   * | ❌|✅|
+   * | ❌|❌|
    */
   onOpen?: (event: Ui5CustomEvent<DateRangePickerDomRef>) => void;
 

packages/main/src/webComponents/DateTimePicker/index.tsx

@@ -201,13 +201,13 @@ interface DateTimePickerPropTypes
   onChange?: (event: Ui5CustomEvent<DateTimePickerDomRef, DatePickerChangeEventDetail>) => void;
 
   /**
-   * Fired after the value-help dialog of the component is closed.
+   * Fired after the component's picker is closed.
    *
    * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
    *
    * | cancelable | bubbles |
    * | :--------: | :-----: |
-   * | ❌|✅|
+   * | ❌|❌|
    */
   onClose?: (event: Ui5CustomEvent<DateTimePickerDomRef>) => void;
 
@@ -223,13 +223,13 @@ interface DateTimePickerPropTypes
   onInput?: (event: Ui5CustomEvent<DateTimePickerDomRef, DatePickerInputEventDetail>) => void;
 
   /**
-   * Fired after the value-help dialog of the component is opened.
+   * Fired after the component's picker is opened.
    *
    * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
    *
    * | cancelable | bubbles |
    * | :--------: | :-----: |
-   * | ❌|✅|
+   * | ❌|❌|
    */
   onOpen?: (event: Ui5CustomEvent<DateTimePickerDomRef>) => void;