feat: update to UI5 Web Components v2.12.0

package.json

@@ -44,11 +44,11 @@
     "@storybook/react": "8.6.14",
     "@storybook/react-vite": "8.6.14",
     "@storybook/theming": "8.6.14",
-    "@ui5/webcomponents": "2.11.0",
-    "@ui5/webcomponents-ai": "2.11.0",
-    "@ui5/webcomponents-compat": "2.11.0",
-    "@ui5/webcomponents-fiori": "2.11.0",
-    "@ui5/webcomponents-icons": "2.11.0",
+    "@ui5/webcomponents": "2.12.0",
+    "@ui5/webcomponents-ai": "2.12.0",
+    "@ui5/webcomponents-compat": "2.12.0",
+    "@ui5/webcomponents-fiori": "2.12.0",
+    "@ui5/webcomponents-icons": "2.12.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "remark-gfm": "4.0.1",
@@ -70,7 +70,7 @@
     "@types/node": "22.15.34",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
-    "@ui5/webcomponents-tools": "2.11.0",
+    "@ui5/webcomponents-tools": "2.12.0",
     "@vitejs/plugin-react": "4.6.0",
     "chromatic": "13.0.1",
     "cssnano": "7.0.7",

packages/ai/package.json

@@ -33,7 +33,7 @@
     "@ui5/webcomponents-react-base": "workspace:~"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-ai": "~2.11.0",
+    "@ui5/webcomponents-ai": "~2.12.0",
     "react": "^18 || ^19"
   },
   "publishConfig": {

packages/base/package.json

@@ -32,7 +32,7 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "@ui5/webcomponents-base": "~2.11.0",
+    "@ui5/webcomponents-base": "~2.12.0",
     "react": "^18 || ^19"
   },
   "peerDependenciesMeta": {

packages/base/src/styling/ThemingParameters.ts

@@ -17,6 +17,7 @@ export const ThemingParameters = {
   sapTextColor: 'var(--sapTextColor)',
   sapLinkColor: 'var(--sapLinkColor)',
   sapCompanyLogo: 'var(--sapCompanyLogo)',
+  sapFavicon: 'var(--sapFavicon)',
   sapBackgroundImage: 'var(--sapBackgroundImage)',
   sapBackgroundImageOpacity: 'var(--sapBackgroundImageOpacity)',
   sapBackgroundImageRepeat: 'var(--sapBackgroundImageRepeat)',

packages/charts/package.json

@@ -39,8 +39,8 @@
     "recharts": "2.15.4"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~2.11.0",
-    "@ui5/webcomponents-react-base": "~2.11.0",
+    "@ui5/webcomponents-react": "~2.12.0",
+    "@ui5/webcomponents-react-base": "~2.12.0",
     "react": "^18 || ^19"
   },
   "publishConfig": {

packages/compat/package.json

@@ -41,8 +41,8 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents-compat": "~2.11.0",
-    "@ui5/webcomponents-react": "~2.11.0",
+    "@ui5/webcomponents-compat": "~2.12.0",
+    "@ui5/webcomponents-react": "~2.12.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },

packages/compat/src/components/Table/index.tsx

@@ -266,6 +266,7 @@ interface TablePropTypes
  * - `import "@ui5/webcomponents-compat/dist/TableCell.js";` (`TableCell`)
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+ * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/Table.js` instead.
  */
 const Table = withWebComponent<TablePropTypes, TableDomRef>(
   'ui5-table',

packages/compat/src/components/TableCell/index.tsx

@@ -20,6 +20,7 @@ interface TableCellPropTypes extends TableCellAttributes, Omit<CommonProps, 'chi
  * The `TableCell` component defines the structure of the data in a single `Table` cell.
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+ * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/TableCell.js` instead.
  */
 const TableCell = withWebComponent<TableCellPropTypes, TableCellDomRef>('ui5-table-cell', [], [], [], []);
 

packages/compat/src/components/TableColumn/index.tsx

@@ -61,6 +61,7 @@ interface TableColumnPropTypes
  * when rendering the `Table` component.
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+ * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/Table.js` instead.
  */
 const TableColumn = withWebComponent<TableColumnPropTypes, TableColumnDomRef>(
   'ui5-table-column',

packages/compat/src/components/TableGroupRow/index.tsx

@@ -24,6 +24,7 @@ interface TableGroupRowPropTypes extends TableGroupRowAttributes, Omit<CommonPro
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  *
  * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents-compat__.
+ * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/Table.js` instead.
  */
 const TableGroupRow = withWebComponent<TableGroupRowPropTypes, TableGroupRowDomRef>(
   'ui5-table-group-row',

packages/compat/src/components/TableRow/index.tsx

@@ -50,6 +50,7 @@ interface TableRowPropTypes extends TableRowAttributes, Omit<CommonProps, keyof
  * The `TableRow` component represents a row in the `Table`.
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+ * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/TableRow.js` instead.
  */
 const TableRow = withWebComponent<TableRowPropTypes, TableRowDomRef>(
   'ui5-table-row',

packages/cypress-commands/package.json

@@ -23,8 +23,8 @@
     "clean": "rimraf dist api-commands.json api-queries.json"
   },
   "peerDependencies": {
-    "@ui5/webcomponents": "~2.11.0",
-    "@ui5/webcomponents-base": "~2.11.0",
+    "@ui5/webcomponents": "~2.12.0",
+    "@ui5/webcomponents-base": "~2.12.0",
     "cypress": "^12 || ^13 || ^14"
   },
   "peerDependenciesMeta": {

packages/main/package.json

@@ -57,10 +57,10 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents": "~2.11.0",
-    "@ui5/webcomponents-base": "~2.11.0",
-    "@ui5/webcomponents-fiori": "~2.11.0",
-    "@ui5/webcomponents-icons": "~2.11.0",
+    "@ui5/webcomponents": "~2.12.0",
+    "@ui5/webcomponents-base": "~2.12.0",
+    "@ui5/webcomponents-fiori": "~2.12.0",
+    "@ui5/webcomponents-icons": "~2.12.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },

packages/main/src/components/VariantManagement/VariantManagement.cy.tsx

@@ -391,10 +391,10 @@ describe('VariantManagement', () => {
   it('Save As', () => {
     const TestComp = ({ onSaveAs }: { onSaveAs: VariantManagementPropTypes['onSaveAs'] }) => {
       const [saved, setSaved] = useState(undefined);
-      const handleSaveAs = (e) => {
+      const handleSaveAs: VariantManagementPropTypes['onSaveAs'] = (e) => {
         onSaveAs(e);
-        const { variantItem: _0, ...rest } = e.detail;
-        setSaved(rest);
+        const { variantItem: _0, children, global, isDefault, nativeDetail, selected, applyAutomatically } = e.detail;
+        setSaved({ nativeDetail, selected, children, isDefault, global, applyAutomatically });
       };
       return (
         <>
@@ -494,11 +494,15 @@ describe('VariantManagement', () => {
       showOnlyFavorites?: VariantManagementPropTypes['showOnlyFavorites'];
     }) => {
       const [save, setSave] = useState(undefined);
-      const handleSave = (e) => {
+      const handleSave: VariantManagementPropTypes['onSaveManageViews'] = (e) => {
+        const { deletedVariants, prevVariants, updatedVariants, variants, nativeDetail } = e.detail;
         onSaveManageViews(e);
         setSave({
-          ...e.detail,
-          variants: e.detail.variants.map((item) => {
+          nativeDetail,
+          deletedVariants,
+          prevVariants,
+          updatedVariants,
+          variants: variants.map((item) => {
             const { variantItem: _0, ...rest } = item;
             return rest;
           }),
@@ -631,11 +635,15 @@ describe('VariantManagement', () => {
       onSaveManageViews: VariantManagementPropTypes['onSaveManageViews'];
     }) => {
       const [save, setSave] = useState(undefined);
-      const handleSave = (e) => {
+      const handleSave: VariantManagementPropTypes['onSaveManageViews'] = (e) => {
+        const { deletedVariants, prevVariants, updatedVariants, variants, nativeDetail } = e.detail;
         onSaveManageViews(e);
         setSave({
-          ...e.detail,
-          variants: e.detail.variants.map((item) => {
+          nativeDetail,
+          deletedVariants,
+          prevVariants,
+          updatedVariants,
+          variants: variants.map((item) => {
             const { variantItem: _0, ...rest } = item;
             return rest;
           }),

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

@@ -208,7 +208,8 @@ const VariantManagement = forwardRef<HTMLDivElement, VariantManagementPropTypes>
 
   const handleSaveView = (e, selectedVariant) => {
     if (typeof onSaveAs === 'function') {
-      onSaveAs(enrichEventWithDetails(e, selectedVariant));
+      //todo: remove nativeDetail in next major
+      onSaveAs(enrichEventWithDetails(e, { ...selectedVariant, nativeDetail: e.detail.originalEvent.detail }));
     }
     setSelectedVariant(selectedVariant);
     if (!e.defaultPrevented) {
@@ -218,7 +219,13 @@ const VariantManagement = forwardRef<HTMLDivElement, VariantManagementPropTypes>
 
   const handleSaveManageViews = (e, payload) => {
     const { defaultView, updatedRows, deletedRows } = payload;
-    const callbackProperties = { deletedVariants: [], prevVariants: [], updatedVariants: [], variants: [] };
+    const callbackProperties = {
+      deletedVariants: [],
+      prevVariants: [],
+      updatedVariants: [],
+      variants: [],
+      nativeDetail: null,
+    };
     setSafeChildren((prev) =>
       Children.toArray(
         prev.map((child) => {
@@ -260,6 +267,8 @@ const VariantManagement = forwardRef<HTMLDivElement, VariantManagementPropTypes>
       ),
     );
     if (typeof onSaveManageViews === 'function') {
+      //todo: remove in next major
+      callbackProperties.nativeDetail = e.detail.originalEvent.detail;
       onSaveManageViews(enrichEventWithDetails(e, callbackProperties));
     }
     if (!e.defaultPrevented) {

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

@@ -25,6 +25,24 @@ interface AvatarGroupAttributes {
    */
   accessibilityAttributes?: AvatarGroupAccessibilityAttributes;
 
+  /**
+   * Defines the accessible name of the AvatarGroup.
+   * When provided, this will override the default aria-label text.
+   *
+   * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleName?: string | undefined;
+
+  /**
+   * Receives id(s) of the elements that describe the AvatarGroup.
+   * When provided, this will be used as aria-labelledby instead of aria-label.
+   *
+   * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleNameRef?: string | undefined;
+
   /**
    * Defines the mode of the `AvatarGroup`.
    * @default "Group"
@@ -149,7 +167,7 @@ interface AvatarGroupPropTypes
  */
 const AvatarGroup = withWebComponent<AvatarGroupPropTypes, AvatarGroupDomRef>(
   'ui5-avatar-group',
-  ['accessibilityAttributes', 'type'],
+  ['accessibilityAttributes', 'accessibleName', 'accessibleNameRef', 'type'],
   [],
   ['overflowButton'],
   ['click', 'overflow'],

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

@@ -102,6 +102,18 @@ interface CheckBoxAttributes {
    */
   text?: string | undefined;
 
+  /**
+   * Defines the form value of the component that is submitted when the checkbox is checked.
+   *
+   * When a form containing `CheckBox` elements is submitted, only the values of the
+   * **checked** checkboxes are included in the form data sent to the server. Unchecked
+   * checkboxes do not contribute any data to the form submission.
+   *
+   * This property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.
+   * @default "on"
+   */
+  value?: string;
+
   /**
    * Defines the value state of the component.
    * @default "None"
@@ -167,7 +179,7 @@ interface CheckBoxPropTypes extends CheckBoxAttributes, Omit<CommonProps, keyof
  */
 const CheckBox = withWebComponent<CheckBoxPropTypes, CheckBoxDomRef>(
   'ui5-checkbox',
-  ['accessibleName', 'accessibleNameRef', 'name', 'text', 'valueState', 'wrappingType'],
+  ['accessibleName', 'accessibleNameRef', 'name', 'text', 'value', 'valueState', 'wrappingType'],
   ['checked', 'disabled', 'displayOnly', 'indeterminate', 'readonly', 'required'],
   [],
   ['change'],

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

@@ -9,6 +9,22 @@ import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui
 import type { ReactNode } from 'react';
 
 interface DialogAttributes {
+  /**
+   * Defines the accessible description of the component.
+   *
+   * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleDescription?: string | undefined;
+
+  /**
+   * Receives id(or many ids) of the elements that describe the component.
+   *
+   * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleDescriptionRef?: string | undefined;
+
   /**
    * Defines the accessible name of the component.
    * @default undefined
@@ -259,7 +275,16 @@ interface DialogPropTypes
  */
 const Dialog = withWebComponent<DialogPropTypes, DialogDomRef>(
   'ui5-dialog',
-  ['accessibleName', 'accessibleNameRef', 'accessibleRole', 'headerText', 'initialFocus', 'state'],
+  [
+    'accessibleDescription',
+    'accessibleDescriptionRef',
+    'accessibleName',
+    'accessibleNameRef',
+    'accessibleRole',
+    'headerText',
+    'initialFocus',
+    'state',
+  ],
   ['draggable', 'open', 'preventFocusRestore', 'preventInitialFocus', 'resizable', 'stretch'],
   ['footer', 'header'],
   ['before-close', 'before-open', 'close', 'open'],

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

@@ -1,10 +1,7 @@
 'use client';
 
 import '@ui5/webcomponents/dist/DynamicDateRange.js';
-import type {
-  DynamicDateRangeChangeEventDetail,
-  DynamicDateRangeValue,
-} from '@ui5/webcomponents/dist/DynamicDateRange.js';
+import type { DynamicDateRangeValue } from '@ui5/webcomponents/dist/DynamicDateRange.js';
 import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base';
 
@@ -22,7 +19,14 @@ interface DynamicDateRangeAttributes {
   value?: DynamicDateRangeValue | undefined;
 }
 
-interface DynamicDateRangeDomRef extends Required<DynamicDateRangeAttributes>, Ui5DomRef {}
+interface DynamicDateRangeDomRef extends Required<DynamicDateRangeAttributes>, Ui5DomRef {
+  /**
+   * Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.
+   * @param {DynamicDateRangeValue} value - The option to convert into an array of date ranges
+   * @returns {Array<Date>} - An array of two `Date` objects representing the start and end dates.
+   */
+  toDates: (value: DynamicDateRangeValue) => Array<Date>;
+}
 
 interface DynamicDateRangePropTypes
   extends DynamicDateRangeAttributes,
@@ -36,7 +40,7 @@ interface DynamicDateRangePropTypes
    * | :--------: | :-----: |
    * | ✅|✅|
    */
-  onChange?: (event: Ui5CustomEvent<DynamicDateRangeDomRef, DynamicDateRangeChangeEventDetail>) => void;
+  onChange?: (event: Ui5CustomEvent<DynamicDateRangeDomRef>) => void;
 }
 
 /**
@@ -63,6 +67,8 @@ interface DynamicDateRangePropTypes
  *
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+ *
+ * @since [2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of __@ui5/webcomponents__.
  */
 const DynamicDateRange = withWebComponent<DynamicDateRangePropTypes, DynamicDateRangeDomRef>(
   'ui5-dynamic-date-range',

packages/main/src/webComponents/Menu/Menu.mdx

@@ -2,6 +2,7 @@ import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/comp
 import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
 import * as ComponentStories from './Menu.stories';
 import { MenuItem } from '../MenuItem';
+import { MenuItemGroup } from '../MenuItemGroup';
 import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
 import { excludePropsForAbstract } from '@sb/utils';
 
@@ -60,4 +61,9 @@ const MyComponentWithMenu = () => {
 <Description of={MenuItem} />
 <ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={MenuItem} />
 
+## MenuItemGroup
+
+<Description of={MenuItemGroup} />
+<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={MenuItemGroup} />
+
 <Footer />