feat: update to @ui5/[email protected]

.github/workflows/test.yml

@@ -27,7 +27,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Cypress run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           browser: chrome
           component: true

package.json

@@ -37,9 +37,9 @@
     "@storybook/react": "7.6.3",
     "@storybook/react-vite": "7.6.3",
     "@storybook/theming": "7.6.3",
-    "@ui5/webcomponents": "1.19.1",
-    "@ui5/webcomponents-fiori": "1.19.1",
-    "@ui5/webcomponents-icons": "1.19.1",
+    "@ui5/webcomponents": "1.20.0",
+    "@ui5/webcomponents-fiori": "1.20.0",
+    "@ui5/webcomponents-icons": "1.20.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "remark-gfm": "^3.0.1",
@@ -59,7 +59,7 @@
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@ui5/webcomponents-tools": "1.19.0",
+    "@ui5/webcomponents-tools": "1.20.0",
     "@vitejs/plugin-react": "^4.2.0",
     "chromatic": "^10.0.0",
     "cssnano": "^6.0.1",

packages/base/package.json

@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "@ui5/webcomponents-base": "~1.19.0",
+    "@ui5/webcomponents-base": "~1.20.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {

packages/base/src/hooks/useStylesheet.ts

@@ -10,10 +10,10 @@ function getUseInsertionEffect(isSSR: boolean) {
 
 export function useStylesheet(styles: StyleDataCSP, componentName: string) {
   getUseInsertionEffect(typeof window === 'undefined')(() => {
-    createOrUpdateStyle(styles, styles.packageName, componentName);
+    createOrUpdateStyle(styles, 'data-ui5wcr-component', componentName);
 
     return () => {
-      removeStyle(styles.packageName, componentName);
+      removeStyle('data-ui5wcr-component', componentName);
     };
   }, [styles]);
 }

packages/charts/package.json

@@ -34,8 +34,8 @@
     "recharts": "2.10.3"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~1.22.0",
-    "@ui5/webcomponents-react-base": "~1.22.0",
+    "@ui5/webcomponents-react": "~1.23.0",
+    "@ui5/webcomponents-react-base": "~1.23.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-jss": "^10.10.0"
   },

packages/cra-template-seed/template.json

@@ -1,9 +1,9 @@
 {
   "package": {
     "dependencies": {
-      "@ui5/webcomponents": "~1.19.0",
-      "@ui5/webcomponents-fiori": "~1.19.0",
-      "@ui5/webcomponents-icons": "~1.19.0",
+      "@ui5/webcomponents": "~1.20.0",
+      "@ui5/webcomponents-fiori": "~1.20.0",
+      "@ui5/webcomponents-icons": "~1.20.0",
       "@ui5/webcomponents-react": "latest",
       "axios": "^0.27.2",
       "formik": "^2.2.9",

packages/cra-template/template.json

@@ -1,9 +1,9 @@
 {
   "package": {
     "dependencies": {
-      "@ui5/webcomponents": "~1.19.0",
-      "@ui5/webcomponents-fiori": "~1.19.0",
-      "@ui5/webcomponents-icons": "~1.19.0",
+      "@ui5/webcomponents": "~1.20.0",
+      "@ui5/webcomponents-fiori": "~1.20.0",
+      "@ui5/webcomponents-icons": "~1.20.0",
       "@ui5/webcomponents-react": "latest",
       "web-vitals": "^2.1.0"
     },

packages/main/package.json

@@ -61,10 +61,10 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents": "~1.19.0",
-    "@ui5/webcomponents-base": "~1.19.0",
-    "@ui5/webcomponents-fiori": "~1.19.0",
-    "@ui5/webcomponents-icons": "~1.19.0",
+    "@ui5/webcomponents": "~1.20.0",
+    "@ui5/webcomponents-base": "~1.20.0",
+    "@ui5/webcomponents-fiori": "~1.20.0",
+    "@ui5/webcomponents-icons": "~1.20.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },

packages/main/src/components/AnalyticalCard/AnalyticalCard.mdx

@@ -2,6 +2,7 @@ import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/comp
 import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
 import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
 import '@ui5/webcomponents-icons/dist/person-placeholder.js';
+import '@ui5/webcomponents/dist/Link.js';
 import { AnalyticalCardHeader } from '../AnalyticalCardHeader';
 import { NumericSideIndicator } from '../NumericSideIndicator';
 import { MessageStrip } from '../../webComponents/MessageStrip/index';
@@ -16,18 +17,14 @@ import * as ComponentStories from './AnalyticalCard.stories';
   design={MessageStripDesign.Warning}
   children={
     <>
-      This component is deprecated and will be removed with our next major release (v2.0.0)! Please use the
+      This component is deprecated and will be removed with our next major release (v2.0.0)! Please use
       <ui5-link href={'https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-card'}>
         Card
       </ui5-link> instead.
     </>
   }
 />
 
-**Note:** The `AnalyticalCard` was mainly made to display KPIs and complex data. If you want to implement a simple card, the `Card` component probably is more suitable.
-
-<br />
-
 ## Example
 
 <Canvas of={ComponentStories.Default} />

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

@@ -2,7 +2,7 @@
 
 import '@ui5/webcomponents-fiori/dist/IllustratedMessage.js';
 import type { ReactNode } from 'react';
-import { IllustrationMessageType, IllustrationMessageSize } from '../../enums/index.js';
+import { IllustrationMessageType, IllustrationMessageSize, TitleLevel } from '../../enums/index.js';
 import type { CommonProps, Ui5DomRef } from '../../interfaces/index.js';
 import { withWebComponent } from '../../internal/withWebComponent.js';
 import type { UI5WCSlotsNode } from '../../types/index.js';
@@ -37,6 +37,10 @@ interface IllustratedMessageAttributes {
    * **Note:** Using `subtitle` slot, the default of this property will be overwritten.
    */
   subtitleText?: string;
+  /**
+   * Defines the semantic level of the title. **Note:** Used for accessibility purposes only.
+   */
+  titleLevel?: TitleLevel | keyof typeof TitleLevel;
   /**
    * Defines the title of the component.
    *
@@ -82,7 +86,7 @@ export interface IllustratedMessagePropTypes extends IllustratedMessageAttribute
  */
 const IllustratedMessage = withWebComponent<IllustratedMessagePropTypes, IllustratedMessageDomRef>(
   'ui5-illustrated-message',
-  ['accessibleNameRef', 'name', 'size', 'subtitleText', 'titleText'],
+  ['accessibleNameRef', 'name', 'size', 'subtitleText', 'titleLevel', 'titleText'],
   [],
   ['subtitle'],
   [],
@@ -93,7 +97,8 @@ IllustratedMessage.displayName = 'IllustratedMessage';
 
 IllustratedMessage.defaultProps = {
   name: IllustrationMessageType.BeforeSearch,
-  size: IllustrationMessageSize.Auto
+  size: IllustrationMessageSize.Auto,
+  titleLevel: TitleLevel.H2
 };
 
 export { IllustratedMessage };

packages/main/src/webComponents/MultiComboBox/MultiComboBoxDomRef.json

@@ -3,7 +3,6 @@
     "name": "open",
     "readonly": "true",
     "visibility": "public",
-    "since": "1.0.0-rc.5",
     "type": "boolean",
     "description": "Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.",
     "defaultValue": "false"

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

@@ -48,6 +48,14 @@ interface SelectAttributes {
 }
 
 export interface SelectDomRef extends Omit<SelectAttributes, 'menu'>, Ui5DomRef {
+  /**
+   * Defines the value of the component:
+   * \- when get - returns the value of the component, e.g. the `value` property of the selected option or its text content.
+   * \- when set - selects the option with matching `value` property or text content.
+   *
+   * **Note:** If the given value does not match any existing option, the first option will get selected.
+   */
+  value?: string;
   /**
    * Defines a reference (ID or DOM element) of the component's options menu, as an alternative to defining the selection's drop-down menu.
    *

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

@@ -2,10 +2,16 @@
 
 import '@ui5/webcomponents/dist/SelectMenuOption.js';
 import type { ReactNode } from 'react';
-import type { CommonProps, Ui5DomRef } from '../../interfaces/index.js';
+import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/index.js';
 import { withWebComponent } from '../../internal/withWebComponent.js';
 
 interface SelectMenuOptionAttributes {
+  /**
+   * Defines whether the component is in disabled state.
+   *
+   * **Note:** A disabled component is hidden.
+   */
+  disabled?: boolean;
   /**
    * Defines the text, displayed inside the `Select` input filed when the option gets selected.
    */
@@ -14,6 +20,14 @@ interface SelectMenuOptionAttributes {
    * Defines the value of the `Select` inside an HTML Form element when this component is selected. For more information on HTML Form support, see the `name` property of `Select`.
    */
   value?: string;
+  /**
+   * Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present.
+   */
+  accessibleName?: string;
+  /**
+   * Defines the selected state of the `ListItem`.
+   */
+  selected?: boolean;
 }
 
 export interface SelectMenuOptionDomRef extends SelectMenuOptionAttributes, Ui5DomRef {}
@@ -23,6 +37,10 @@ export interface SelectMenuOptionPropTypes extends SelectMenuOptionAttributes, C
    * Defines the content of the component.
    */
   children?: ReactNode | ReactNode[];
+  /**
+   * Fired when the user clicks on the detail button when type is `Detail`.
+   */
+  onDetailClick?: (event: Ui5CustomEvent<SelectMenuOptionDomRef>) => void;
 }
 
 /**
@@ -34,10 +52,10 @@ export interface SelectMenuOptionPropTypes extends SelectMenuOptionAttributes, C
  */
 const SelectMenuOption = withWebComponent<SelectMenuOptionPropTypes, SelectMenuOptionDomRef>(
   'ui5-select-menu-option',
-  ['displayText', 'value'],
-  [],
-  [],
+  ['displayText', 'value', 'accessibleName'],
+  ['disabled', 'selected'],
   [],
+  ['detail-click'],
   () => import('@ui5/webcomponents/dist/SelectMenuOption.js')
 );
 

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

@@ -10,6 +10,14 @@ interface SideNavigationItemAttributes {
    * Defines if the item is expanded
    */
   expanded?: boolean;
+  /**
+   * Defines whether clicking the whole item or only pressing the icon will show/hide the sub items (if present). If set to true, clicking the whole item will toggle the sub items, and it won't fire the `onClick` event. By default, only clicking the arrow icon will toggle the sub items.
+   */
+  wholeItemToggleable?: boolean;
+  /**
+   * Defines the link target URI. Supports standard hyperlink behavior. If a JavaScript action should be triggered, this should not be set, but instead an event handler for the `onClick` event should be registered.
+   */
+  href?: string;
   /**
    * Defines the icon of the item.
    *
@@ -18,17 +26,27 @@ interface SideNavigationItemAttributes {
    */
   icon?: string;
   /**
-   * Defines whether the subitem is selected
+   * Defines whether the item is selected
    */
   selected?: boolean;
   /**
-   * Defines the text of the item.
+   * Defines the component target.
+   *
+   * **Notes:**
+   *
+   * *   `_self`
+   * *   `_top`
+   * *   `_blank`
+   * *   `_parent`
+   * *   `_search`
+   *
+   * **This property must only be used when the `href` property is set.**
    */
-  text?: string;
+  target?: string;
   /**
-   * Defines whether pressing the whole item or only pressing the icon will show/hide the items's sub items(if present). If set to true, pressing the whole item will toggle the sub items, and it won't fire the `onClick` event. By default, only pressing the arrow icon will toggle the sub items & the click event will be fired if the item is pressed outside of the icon.
+   * Defines the text of the item.
    */
-  wholeItemToggleable?: boolean;
+  text?: string;
 }
 
 export interface SideNavigationItemDomRef extends SideNavigationItemAttributes, Ui5DomRef {}
@@ -55,8 +73,8 @@ export interface SideNavigationItemPropTypes extends SideNavigationItemAttribute
  */
 const SideNavigationItem = withWebComponent<SideNavigationItemPropTypes, SideNavigationItemDomRef>(
   'ui5-side-navigation-item',
-  ['icon', 'text'],
-  ['expanded', 'selected', 'wholeItemToggleable'],
+  ['href', 'icon', 'target', 'text'],
+  ['expanded', 'wholeItemToggleable', 'selected'],
   [],
   ['click'],
   () => import('@ui5/webcomponents-fiori/dist/SideNavigationItem.js')

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

@@ -5,6 +5,10 @@ import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/in
 import { withWebComponent } from '../../internal/withWebComponent.js';
 
 interface SideNavigationSubItemAttributes {
+  /**
+   * Defines the link target URI. Supports standard hyperlink behavior. If a JavaScript action should be triggered, this should not be set, but instead an event handler for the `onClick` event should be registered.
+   */
+  href?: string;
   /**
    * Defines the icon of the item.
    *
@@ -13,9 +17,23 @@ interface SideNavigationSubItemAttributes {
    */
   icon?: string;
   /**
-   * Defines whether the subitem is selected.
+   * Defines whether the item is selected
    */
   selected?: boolean;
+  /**
+   * Defines the component target.
+   *
+   * **Notes:**
+   *
+   * *   `_self`
+   * *   `_top`
+   * *   `_blank`
+   * *   `_parent`
+   * *   `_search`
+   *
+   * **This property must only be used when the `href` property is set.**
+   */
+  target?: string;
   /**
    * Defines the text of the item.
    */
@@ -42,7 +60,7 @@ export interface SideNavigationSubItemPropTypes extends SideNavigationSubItemAtt
  */
 const SideNavigationSubItem = withWebComponent<SideNavigationSubItemPropTypes, SideNavigationSubItemDomRef>(
   'ui5-side-navigation-sub-item',
-  ['icon', 'text'],
+  ['href', 'icon', 'target', 'text'],
   ['selected'],
   [],
   ['click'],

scripts/web-component-wrappers/config.js

@@ -11,6 +11,7 @@ export const PRIVATE_COMPONENTS = {
   NotificationListItemBase: true,
   Popup: true,
   PickerBase: true,
+  SideNavigationItemBase: true,
   SliderBase: true,
   TabBase: true,
   ThemePropertiesProvider: true,

scripts/web-component-wrappers/utils.js

@@ -63,7 +63,7 @@ export const getTypeDefinitionForProperty = (property, options = {}) => {
     };
   }
 
-  if (property.type === 'sap.ui.webc.fiori.ISideNavigationItem|sap.ui.webc.fiori.ISideNavigationSubItem') {
+  if (property.type === 'sap.ui.webc.fiori.SideNavigationItem[]') {
     return {
       tsType: reactNodeType,
       importStatement: importStatementReactNodeType

scripts/web-component-wrappers/version-info.json

@@ -37,5 +37,6 @@
   "1.16.0": "1.18.0",
   "1.17.0": "1.19.0",
   "1.18.0": "1.20.0",
-  "1.19.0": "1.22.0"
+  "1.19.0": "1.22.0",
+  "1.20.0": "1.23.0"
 }