feat: update to UI5 Web Components ~2.1.1

package.json

@@ -40,10 +40,10 @@
     "@storybook/react": "8.0.10",
     "@storybook/react-vite": "8.0.10",
     "@storybook/theming": "8.0.10",
-    "@ui5/webcomponents": "2.0.1",
-    "@ui5/webcomponents-compat": "2.0.1",
-    "@ui5/webcomponents-fiori": "2.0.1",
-    "@ui5/webcomponents-icons": "2.0.1",
+    "@ui5/webcomponents": "2.1.1",
+    "@ui5/webcomponents-compat": "2.1.1",
+    "@ui5/webcomponents-fiori": "2.1.1",
+    "@ui5/webcomponents-icons": "2.1.1",
     "react": "19.0.0-rc-f38c22b244-20240704",
     "react-dom": "19.0.0-rc-f38c22b244-20240704",
     "remark-gfm": "^4.0.0",
@@ -65,7 +65,7 @@
     "@types/use-sync-external-store": "^0.0.6",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
-    "@ui5/webcomponents-tools": "2.0.1",
+    "@ui5/webcomponents-tools": "2.1.1",
     "@vitejs/plugin-react": "^4.2.0",
     "chromatic": "^11.0.0",
     "cssnano": "^7.0.0",

packages/base/package.json

@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "@ui5/webcomponents-base": "~2.0.1",
+    "@ui5/webcomponents-base": "~2.1.1",
     "react": "^18 || ^19"
   },
   "peerDependenciesMeta": {

packages/cli/src/scripts/create-wrappers/AttributesRenderer.ts

@@ -70,7 +70,7 @@ export class AttributesRenderer extends AbstractRenderer {
     type = mapWebComponentTypeToTsType(type);
 
     const references = attribute.type?.references;
-    const isEnum = references != null && references?.length > 0 && attribute._ui5validator !== 'Object';
+    const isEnum = references != null && references?.length > 0 && attribute.default !== '{}';
 
     if (isEnum) {
       type += ` | keyof typeof ${type}`;

packages/compat/package.json

@@ -39,7 +39,7 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents-compat": "~2.0.1",
+    "@ui5/webcomponents-compat": "~2.1.1",
     "@ui5/webcomponents-react": "workspace:~",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"

packages/main/package.json

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

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

@@ -172,7 +172,7 @@ describe('VariantManagement', () => {
 
     cy.get('[ui5-responsive-popover]').should('not.be.visible');
     cy.findAllByText('VariantItem 2').should('have.length', 2);
-    cy.get('[ui5-title]').findByText('VariantItem 2').click();
+    cy.get('[ui5-title]').contains('VariantItem 2').click();
     cy.get('[ui5-responsive-popover]').should('be.visible');
 
     cy.findAllByText('VariantItem 1').should('have.length', 1);
@@ -200,7 +200,7 @@ describe('VariantManagement', () => {
   it('Disabled', () => {
     cy.mount(<VariantManagement disabled>{TwoVariantItems}</VariantManagement>);
     cy.get('[ui5-responsive-popover]').should('not.be.visible');
-    cy.get('[ui5-title]').findByText('VariantItem 2').should('be.visible').click();
+    cy.get('[ui5-title]').contains('VariantItem 2').should('be.visible').click();
     cy.get('[ui5-responsive-popover]').should('not.be.visible');
     cy.get('[icon="navigation-down-arrow"]').should('have.attr', 'disabled', 'disabled').click({ force: true });
     cy.get('[ui5-responsive-popover]').should('not.be.visible');
@@ -234,7 +234,7 @@ describe('VariantManagement', () => {
     cy.mount(<TestComp onSave={save} />);
 
     cy.findByText('*').should('be.visible');
-    cy.get('[ui5-title]').findByText('VariantItem 2').click();
+    cy.get('[ui5-title]').contains('VariantItem 2').click();
     cy.findByText('Save').click();
     cy.get('@save').should('have.been.calledOnce');
     cy.findByText('Saved Variant:VariantItem 2');
@@ -251,12 +251,12 @@ describe('VariantManagement', () => {
 
   it('Show/Hide buttons', () => {
     cy.mount(<VariantManagement>{TwoVariantItems}</VariantManagement>);
-    cy.get('[ui5-title]').findByText('VariantItem 2').click();
+    cy.get('[ui5-title]').contains('VariantItem 2').click();
     cy.findByText('Save As').should('be.visible');
     cy.findByText('Manage').should('be.visible');
 
     cy.mount(<VariantManagement hideSaveAs>{TwoVariantItems}</VariantManagement>);
-    cy.get('[ui5-title]').findByText('VariantItem 2').click();
+    cy.get('[ui5-title]').contains('VariantItem 2').click();
     cy.findByText('Save As', { timeout: 200 }).should('not.exist');
     cy.findByText('Manage').should('be.visible');
 
@@ -266,7 +266,7 @@ describe('VariantManagement', () => {
         <VariantItem selected>VariantItem 2</VariantItem>
       </VariantManagement>
     );
-    cy.get('[ui5-title]').findByText('VariantItem 2').click();
+    cy.get('[ui5-title]').contains('VariantItem 2').click();
     cy.findByText('Save As', { timeout: 200 }).should('not.exist');
     cy.findByText('Manage', { timeout: 200 }).should('not.exist');
   });

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

@@ -29,7 +29,7 @@ interface CalendarDateRangePropTypes
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  *
- * @since [2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0) of __@ui5/webcomponents__.
+ * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__.
  * @abstract
  */
 const CalendarDateRange = withWebComponent<CalendarDateRangePropTypes, CalendarDateRangeDomRef>(

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

@@ -19,6 +19,22 @@ interface CardAttributes {
    * @default undefined
    */
   accessibleNameRef?: string | undefined;
+
+  /**
+   * Defines if a loading indicator would be displayed over the card.
+   *
+   * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Defines the delay in milliseconds, after which the loading indicator will show up for this card.
+   *
+   * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**.
+   * @default 1000
+   */
+  loadingDelay?: number;
 }
 
 interface CardDomRef extends Required<CardAttributes>, Ui5DomRef {}
@@ -59,8 +75,8 @@ interface CardPropTypes extends CardAttributes, Omit<CommonProps, keyof CardAttr
  */
 const Card = withWebComponent<CardPropTypes, CardDomRef>(
   'ui5-card',
-  ['accessibleName', 'accessibleNameRef'],
-  [],
+  ['accessibleName', 'accessibleNameRef', 'loadingDelay'],
+  ['loading'],
   ['header'],
   [],
   () => import('@ui5/webcomponents/dist/Card.js')

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

@@ -138,7 +138,7 @@ interface ComboBoxPropTypes
    * **Note:** If not specified, a default text (in the respective language) will be displayed.
    *
    * **Note:** The `valueStateMessage` would be displayed,
-   * when the `ComboBox` is in `Information`, `Warning` or `Error` value state.
+   * when the `ComboBox` is in `Information`, `Critical` or `Negative` value state.
    *
    * __Note:__ The content of the prop will be rendered into a [<slot>](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="valueStateMessage"`).
    * 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.

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

@@ -164,7 +164,7 @@ interface DatePickerPropTypes
    * **Note:** If not specified, a default text (in the respective language) will be displayed.
    *
    * **Note:** The `valueStateMessage` would be displayed,
-   * when the component is in `Information`, `Warning` or `Error` value state.
+   * when the component is in `Information`, `Critical` or `Negative` value state.
    *
    * __Note:__ The content of the prop will be rendered into a [<slot>](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="valueStateMessage"`).
    * 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.

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

@@ -29,7 +29,7 @@ interface DateRangePickerAttributes {
    * If not supplied, the default time interval delimiter for the current locale will be used.
    * @default "-"
    */
-  delimiter?: unknown;
+  delimiter?: string;
 
   /**
    * Determines whether the component is displayed as disabled.
@@ -186,7 +186,7 @@ interface DateRangePickerPropTypes
    * **Note:** If not specified, a default text (in the respective language) will be displayed.
    *
    * **Note:** The `valueStateMessage` would be displayed,
-   * when the component is in `Information`, `Warning` or `Error` value state.
+   * when the component is in `Information`, `Critical` or `Negative` value state.
    *
    * __Note:__ The content of the prop will be rendered into a [<slot>](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="valueStateMessage"`).
    * 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.

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

@@ -164,7 +164,7 @@ interface DateTimePickerPropTypes
    * **Note:** If not specified, a default text (in the respective language) will be displayed.
    *
    * **Note:** The `valueStateMessage` would be displayed,
-   * when the component is in `Information`, `Warning` or `Error` value state.
+   * when the component is in `Information`, `Critical` or `Negative` value state.
    *
    * __Note:__ The content of the prop will be rendered into a [<slot>](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="valueStateMessage"`).
    * 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.

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

@@ -204,7 +204,7 @@ interface DialogPropTypes
  * The dialog combines concepts known from other technologies where the windows have
  * names such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.
  *
- * The `Dialog` is modal, which means that an user action is required before it is possible to return to the parent window.
+ * The `Dialog` is modal, which means that a user action is required before it is possible to return to the parent window.
  * To open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.
  * The content of the `Dialog` is fully customizable.
  *
@@ -240,13 +240,6 @@ interface DialogPropTypes
  *
  *
  *
- * **Note:** We recommend placing popup-like components (`Dialog` and `Popover`)
- * outside any other components. Preferably, the popup-like components should be placed
- * in an upper level HTML element. Otherwise, in some cases the parent HTML elements can break
- * the position and/or z-index management of the popup-like components.
- *
- * **Note:** We don't recommend nesting popup-like components (`Dialog`, `Popover`).
- *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  */
 const Dialog = withWebComponent<DialogPropTypes, DialogDomRef>(

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

@@ -52,6 +52,12 @@ interface DynamicPageTitlePropTypes
   /**
    * Defines the content of the Heading of the Dynamic Page.
    *
+   * The font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:
+   *
+   * **Expanded:** `var(--sapObjectHeader_Title_FontSize)`
+   *
+   * **Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`
+   *
    * __Note:__ The content of the prop will be rendered into a [<slot>](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="heading"`).
    * 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.
    *

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

@@ -12,6 +12,7 @@ interface FileUploaderAttributes {
    * Comma-separated list of file types that the component should accept.
    *
    * **Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only.
+   * @default undefined
    */
   accept?: string | undefined;
 
@@ -85,7 +86,7 @@ interface FileUploaderPropTypes
    * **Note:** If not specified, a default text (in the respective language) will be displayed.
    *
    * **Note:** The `valueStateMessage` would be displayed,
-   * when the component is in `Information`, `Warning` or `Error` value state.
+   * when the component is in `Information`, `Critical` or `Negative` value state.
    *
    * __Note:__ The content of the prop will be rendered into a [<slot>](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="valueStateMessage"`).
    * 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.

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

@@ -143,6 +143,7 @@ interface InputPropTypes
       | 'onClose'
       | 'onInput'
       | 'onOpen'
+      | 'onSelect'
       | 'onSelectionChange'
     > {
   /**
@@ -179,7 +180,7 @@ interface InputPropTypes
    * **Note:** If not specified, a default text (in the respective language) will be displayed.
    *
    * **Note:** The `valueStateMessage` would be displayed,
-   * when the component is in `Information`, `Warning` or `Error` value state.
+   * when the component is in `Information`, `Critical` or `Negative` value state.
    *
    * **Note:** If the component has `suggestionItems`,
    * the `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.
@@ -216,6 +217,13 @@ interface InputPropTypes
    */
   onOpen?: (event: Ui5CustomEvent<InputDomRef>) => void;
 
+  /**
+   * Fired when some text has been selected.
+   *
+   * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**.
+   */
+  onSelect?: (event: Ui5CustomEvent<InputDomRef>) => void;
+
   /**
    * Fired when the user navigates to a suggestion item via the ARROW keys,
    * as a preview, before the final selection.
@@ -233,7 +241,7 @@ interface InputPropTypes
  *
  * The text field can be editable or read-only (`readonly` property),
  * and it can be enabled or disabled (`disabled` property).
- * To visualize semantic states, such as "error" or "warning", the `valueState` property is provided.
+ * To visualize semantic states, such as "Negative" or "Critical", the `valueState` property is provided.
  * When the user makes changes to the text, the change event is fired,
  * which enables you to react on any text change.
  *
@@ -265,7 +273,7 @@ const Input = withWebComponent<InputPropTypes, InputDomRef>(
   ['accessibleName', 'accessibleNameRef', 'maxlength', 'name', 'placeholder', 'type', 'value', 'valueState'],
   ['disabled', 'noTypeahead', 'open', 'readonly', 'required', 'showClearIcon', 'showSuggestions'],
   ['icon', 'valueStateMessage'],
-  ['change', 'close', 'input', 'open', 'selection-change'],
+  ['change', 'close', 'input', 'open', 'select', 'selection-change'],
   () => import('@ui5/webcomponents/dist/Input.js')
 );
 

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

@@ -1,9 +1,10 @@
 'use client';
 
 import '@ui5/webcomponents/dist/ListItemGroup.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, UI5WCSlotsNode } from '../../types/index.js';
+import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js';
 
 interface ListItemGroupAttributes {
   /**
@@ -23,7 +24,7 @@ interface ListItemGroupDomRef extends Required<ListItemGroupAttributes>, Ui5DomR
 
 interface ListItemGroupPropTypes
   extends ListItemGroupAttributes,
-    Omit<CommonProps, keyof ListItemGroupAttributes | 'children' | 'header'> {
+    Omit<CommonProps, keyof ListItemGroupAttributes | 'children' | 'header' | 'onMove' | 'onMoveOver'> {
   /**
    * Defines the items of the <code>ui5-li-group</code>.
    */
@@ -41,6 +42,27 @@ interface ListItemGroupPropTypes
    * 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:** 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**.
+   */
+  onMove?: (event: Ui5CustomEvent<ListItemGroupDomRef, 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**.
+   */
+  onMoveOver?: (event: Ui5CustomEvent<ListItemGroupDomRef, ListItemGroupMoveEventDetail>) => void;
 }
 
 /**
@@ -59,7 +81,7 @@ const ListItemGroup = withWebComponent<ListItemGroupPropTypes, ListItemGroupDomR
   ['headerAccessibleName', 'headerText'],
   [],
   ['header'],
-  [],
+  ['move-over', 'move'],
   () => import('@ui5/webcomponents/dist/ListItemGroup.js')
 );