feat: update @ui5/webcomponents to ~2.4.0 (#6585)

.storybook/tsconfig.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "allowJs": true
   },
-  "include": ["./**/*.js", "./**/*.tsx"]
+  "include": ["./**/*.js", "./**/*.tsx", "./**/*.ts"]
 }

.storybook/utils.ts

@@ -60,7 +60,8 @@ const replaceSubComps = {
   ToolbarItem: ['ToolbarSeparator', 'ToolbarSpacer', 'ToolbarButton', 'ToolbarSelect', 'ToolbarSelectOption'],
   TreeItemBase: ['TreeItem', 'TreeItemCustom'],
   AvatarGroupItem: ['Avatar'],
-  TableFeature: ['TableGrowing', 'TableSelection']
+  TableFeature: ['TableGrowing', 'TableSelection'],
+  SideNavigationItemBase: ['SideNavigationItem', 'SideNavigationGroup', 'SideNavigationSubItem']
 };
 
 function findSubComponentsRecursively(moduleName: string, cem: any): string[] {

package.json

@@ -23,8 +23,9 @@
     "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
     "wrappers:main": "WITH_WEB_COMPONENT_IMPORT_PATH='../../internal/withWebComponent.js' INTERFACES_IMPORT_PATH='../../types/index.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
     "wrappers:fiori": "WITH_WEB_COMPONENT_IMPORT_PATH='../../internal/withWebComponent.js' INTERFACES_IMPORT_PATH='../../types/index.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
-    "wrappers:compat": "WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react/dist/internal/withWebComponent.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components && eslint --ext .ts,.tsx --fix ./packages/compat/src/components/*/index.tsx",
-    "create-webcomponents-wrapper": "(cd packages/cli && tsc) && yarn run wrappers:main && yarn run wrappers:fiori && yarn run wrappers:compat && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --ext .ts,.tsx --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem",
+    "wrappers:compat": "WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react/dist/internal/withWebComponent.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components",
+    "create-webcomponents-wrapper": "(cd packages/cli && tsc) && yarn run wrappers:main && yarn run wrappers:fiori && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem",
+    "create-webcomponents-wrapper-compat": "(cd packages/cli && tsc) && yarn run wrappers:compat && yarn run sb:prepare-cem && eslint --fix ./packages/compat/src/components/*/index.tsx",
     "chromatic": "cross-env STORYBOOK_ENV=chromatic npx chromatic --build-script-name build:storybook",
     "postinstall": "husky && yarn setup",
     "create-cypress-commands-docs": "typedoc && rimraf temp/typedoc",
@@ -39,10 +40,10 @@
     "@storybook/react": "8.3.6",
     "@storybook/react-vite": "8.3.6",
     "@storybook/theming": "8.3.6",
-    "@ui5/webcomponents": "2.3.0",
-    "@ui5/webcomponents-compat": "2.3.0",
-    "@ui5/webcomponents-fiori": "2.3.0",
-    "@ui5/webcomponents-icons": "2.3.0",
+    "@ui5/webcomponents": "2.4.0",
+    "@ui5/webcomponents-compat": "2.4.0",
+    "@ui5/webcomponents-fiori": "2.4.0",
+    "@ui5/webcomponents-icons": "2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "remark-gfm": "^4.0.0",
@@ -64,7 +65,7 @@
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "@types/use-sync-external-store": "^0.0.6",
-    "@ui5/webcomponents-tools": "2.3.0",
+    "@ui5/webcomponents-tools": "2.4.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.3.0",
+    "@ui5/webcomponents-base": "~2.4.0",
     "react": "^18 || ^19"
   },
   "peerDependenciesMeta": {

packages/charts/package.json

@@ -39,8 +39,8 @@
     "recharts": "2.13.3"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~2.3.0",
-    "@ui5/webcomponents-react-base": "~2.3.0",
+    "@ui5/webcomponents-react": "~2.4.0",
+    "@ui5/webcomponents-react-base": "~2.4.0",
     "react": "^18"
   },
   "publishConfig": {

packages/cli/src/util/recursiveManifestResolver.ts

@@ -24,7 +24,8 @@ const EXCLUDED_MEMBERS = new Set([
   'onEnterDOM',
   'onExitDOM',
   'onInvalidation',
-  'getStaticAreaItemDomRef'
+  'getStaticAreaItemDomRef',
+  'fireDecoratorEvent'
 ]);
 
 function mergeArraysWithoutDuplicates(currentValues: any[], newValue: any) {

packages/compat/package.json

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

packages/main/package.json

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

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

@@ -6,7 +6,7 @@ import type {
   BarcodeScannerDialogScanSuccessEventDetail
 } from '@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js';
 import { withWebComponent } from '../../internal/withWebComponent.js';
-import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js';
+import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js';
 
 interface BarcodeScannerDialogAttributes {
   /**
@@ -22,9 +22,49 @@ interface BarcodeScannerDialogDomRef extends Required<BarcodeScannerDialogAttrib
 
 interface BarcodeScannerDialogPropTypes
   extends BarcodeScannerDialogAttributes,
-    Omit<CommonProps, keyof BarcodeScannerDialogAttributes | 'onClose' | 'onScanError' | 'onScanSuccess'> {
+    Omit<
+      CommonProps,
+      keyof BarcodeScannerDialogAttributes | 'footer' | 'header' | 'onClose' | 'onScanError' | 'onScanSuccess'
+    > {
+  /**
+   * Defines the footer HTML Element.
+   *
+   * **Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.
+   * This means you need to include your own mechanism within the custom `footer` to close the dialog,
+   * such as a button with an event listener that closes the dialog.
+   *
+   * **Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,
+   * allowing users to close the dialog without any additional implementation.
+   *
+   * __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="footer"`).
+   * 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).
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents-fiori**.
+   */
+  footer?: UI5WCSlotsNode;
+
+  /**
+   * Defines the header HTML Element.
+   *
+   * **Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.
+   * `accessibleName` should be used.
+   *
+   * __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).
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents-fiori**.
+   */
+  header?: UI5WCSlotsNode;
   /**
    * Fired when the user closes the component.
+   *
+   * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-fiori**.
    */
   onClose?: (event: Ui5CustomEvent<BarcodeScannerDialogDomRef>) => void;
 
@@ -58,7 +98,7 @@ const BarcodeScannerDialog = withWebComponent<BarcodeScannerDialogPropTypes, Bar
   'ui5-barcode-scanner-dialog',
   [],
   ['open'],
-  [],
+  ['footer', 'header'],
   ['close', 'scan-error', 'scan-success']
 );
 

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

@@ -166,7 +166,13 @@ interface DatePickerPropTypes
   extends DatePickerAttributes,
     Omit<
       CommonProps,
-      keyof DatePickerAttributes | 'valueStateMessage' | 'onChange' | 'onInput' | 'onValueStateChange'
+      | keyof DatePickerAttributes
+      | 'valueStateMessage'
+      | 'onChange'
+      | 'onClose'
+      | 'onInput'
+      | 'onOpen'
+      | 'onValueStateChange'
     > {
   /**
    * Defines the value state message that will be displayed as pop up under the component.
@@ -190,13 +196,27 @@ interface DatePickerPropTypes
    */
   onChange?: (event: Ui5CustomEvent<DatePickerDomRef, DatePickerChangeEventDetail>) => void;
 
+  /**
+   * Fired after the value-help dialog of the component is closed.
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
+   */
+  onClose?: (event: Ui5CustomEvent<DatePickerDomRef>) => void;
+
   /**
    * Fired when the value of the component is changed at each key stroke.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onInput?: (event: Ui5CustomEvent<DatePickerDomRef, DatePickerInputEventDetail>) => void;
 
+  /**
+   * Fired after the value-help dialog of the component is opened.
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
+   */
+  onOpen?: (event: Ui5CustomEvent<DatePickerDomRef>) => void;
+
   /**
    * Fired before the value state of the component is updated internally.
    * The event is preventable, meaning that if it's default action is
@@ -298,7 +318,7 @@ const DatePicker = withWebComponent<DatePickerPropTypes, DatePickerDomRef>(
   ],
   ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'],
   ['valueStateMessage'],
-  ['change', 'input', 'value-state-change']
+  ['change', 'close', 'input', 'open', 'value-state-change']
 );
 
 DatePicker.displayName = 'DatePicker';

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

@@ -188,7 +188,13 @@ interface DateRangePickerPropTypes
   extends DateRangePickerAttributes,
     Omit<
       CommonProps,
-      keyof DateRangePickerAttributes | 'valueStateMessage' | 'onChange' | 'onInput' | 'onValueStateChange'
+      | keyof DateRangePickerAttributes
+      | 'valueStateMessage'
+      | 'onChange'
+      | 'onClose'
+      | 'onInput'
+      | 'onOpen'
+      | 'onValueStateChange'
     > {
   /**
    * Defines the value state message that will be displayed as pop up under the component.
@@ -212,13 +218,27 @@ interface DateRangePickerPropTypes
    */
   onChange?: (event: Ui5CustomEvent<DateRangePickerDomRef, DatePickerChangeEventDetail>) => void;
 
+  /**
+   * Fired after the value-help dialog of the component is closed.
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
+   */
+  onClose?: (event: Ui5CustomEvent<DateRangePickerDomRef>) => void;
+
   /**
    * Fired when the value of the component is changed at each key stroke.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onInput?: (event: Ui5CustomEvent<DateRangePickerDomRef, DatePickerInputEventDetail>) => void;
 
+  /**
+   * Fired after the value-help dialog of the component is opened.
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
+   */
+  onOpen?: (event: Ui5CustomEvent<DateRangePickerDomRef>) => void;
+
   /**
    * Fired before the value state of the component is updated internally.
    * The event is preventable, meaning that if it's default action is
@@ -273,7 +293,7 @@ const DateRangePicker = withWebComponent<DateRangePickerPropTypes, DateRangePick
   ],
   ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'],
   ['valueStateMessage'],
-  ['change', 'input', 'value-state-change']
+  ['change', 'close', 'input', 'open', 'value-state-change']
 );
 
 DateRangePicker.displayName = 'DateRangePicker';

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

@@ -166,7 +166,13 @@ interface DateTimePickerPropTypes
   extends DateTimePickerAttributes,
     Omit<
       CommonProps,
-      keyof DateTimePickerAttributes | 'valueStateMessage' | 'onChange' | 'onInput' | 'onValueStateChange'
+      | keyof DateTimePickerAttributes
+      | 'valueStateMessage'
+      | 'onChange'
+      | 'onClose'
+      | 'onInput'
+      | 'onOpen'
+      | 'onValueStateChange'
     > {
   /**
    * Defines the value state message that will be displayed as pop up under the component.
@@ -190,13 +196,27 @@ interface DateTimePickerPropTypes
    */
   onChange?: (event: Ui5CustomEvent<DateTimePickerDomRef, DatePickerChangeEventDetail>) => void;
 
+  /**
+   * Fired after the value-help dialog of the component is closed.
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
+   */
+  onClose?: (event: Ui5CustomEvent<DateTimePickerDomRef>) => void;
+
   /**
    * Fired when the value of the component is changed at each key stroke.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onInput?: (event: Ui5CustomEvent<DateTimePickerDomRef, DatePickerInputEventDetail>) => void;
 
+  /**
+   * Fired after the value-help dialog of the component is opened.
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
+   */
+  onOpen?: (event: Ui5CustomEvent<DateTimePickerDomRef>) => void;
+
   /**
    * Fired before the value state of the component is updated internally.
    * The event is preventable, meaning that if it's default action is
@@ -280,7 +300,7 @@ const DateTimePicker = withWebComponent<DateTimePickerPropTypes, DateTimePickerD
   ],
   ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'],
   ['valueStateMessage'],
-  ['change', 'input', 'value-state-change']
+  ['change', 'close', 'input', 'open', 'value-state-change']
 );
 
 DateTimePicker.displayName = 'DateTimePicker';

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

@@ -171,26 +171,26 @@ interface DialogPropTypes
    */
   header?: UI5WCSlotsNode;
   /**
-   * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**
+   * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onBeforeClose?: (event: Ui5CustomEvent<DialogDomRef, PopupBeforeCloseEventDetail>) => void;
 
   /**
-   * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**
+   * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onBeforeOpen?: (event: Ui5CustomEvent<DialogDomRef>) => void;
 
   /**
-   * Fired after the component is closed. **This event does not bubble.**
+   * Fired after the component is closed.
    */
   onClose?: (event: Ui5CustomEvent<DialogDomRef>) => void;
 
   /**
-   * Fired after the component is opened. **This event does not bubble.**
+   * Fired after the component is opened.
    */
   onOpen?: (event: Ui5CustomEvent<DialogDomRef>) => void;
 }

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

@@ -45,8 +45,8 @@ interface FormAttributes {
    * - `S` - 1 column by default (1 column is recommended)
    * - `M` - 1 column by default (up to 2 columns are recommended)
    * - `L` - 2 columns by default (up to 3 columns are recommended)
-   * - `XL` - 2 columns by default (up to 6 columns  are recommended)
-   * @default "S1 M1 L2 XL2"
+   * - `XL` - 3 columns by default (up to 6 columns  are recommended)
+   * @default "S1 M1 L2 XL3"
    */
   layout?: string;
 }
@@ -104,7 +104,7 @@ interface FormPropTypes extends FormAttributes, Omit<CommonProps, keyof FormAttr
  * - **S** (< 600px) – 1 column is recommended (default: 1)
  * - **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)
  * - **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)
- * - **XL** (> 1439px) – up to 6 columns are recommended (default: 2)
+ * - **XL** (> 1439px) – up to 6 columns are recommended (default: 3)
  *
  * To change the layout, use the `layout` property - f.e. layout="S1 M2 L3 XL6".
  *

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

@@ -197,8 +197,6 @@ interface ListPropTypes
    * 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:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onMove?: (event: Ui5CustomEvent<ListDomRef, ListMoveEventDetail>) => void;