feat: update to @ui5/webcomponents@~1.18.0

package.json

@@ -37,9 +37,9 @@
     "@storybook/react": "7.4.5",
     "@storybook/react-vite": "7.4.5",
     "@storybook/theming": "7.4.5",
-    "@ui5/webcomponents": "1.17.2",
-    "@ui5/webcomponents-fiori": "1.17.2",
-    "@ui5/webcomponents-icons": "1.17.2",
+    "@ui5/webcomponents": "1.18.0",
+    "@ui5/webcomponents-fiori": "1.18.0",
+    "@ui5/webcomponents-icons": "1.18.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.17.2",
+    "@ui5/webcomponents-tools": "1.18.0",
     "@vitejs/plugin-react": "^4.0.0",
     "chromatic": "^7.0.0",
     "cssnano": "^6.0.1",

packages/base/package.json

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

packages/charts/package.json

@@ -34,8 +34,8 @@
     "recharts": "2.8.0"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~1.19.0",
-    "@ui5/webcomponents-react-base": "~1.19.0",
+    "@ui5/webcomponents-react": "~1.20.0",
+    "@ui5/webcomponents-react-base": "~1.20.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.17.0",
-      "@ui5/webcomponents-fiori": "~1.17.0",
-      "@ui5/webcomponents-icons": "~1.17.0",
+      "@ui5/webcomponents": "~1.18.0",
+      "@ui5/webcomponents-fiori": "~1.18.0",
+      "@ui5/webcomponents-icons": "~1.18.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.17.0",
-      "@ui5/webcomponents-fiori": "~1.17.0",
-      "@ui5/webcomponents-icons": "~1.17.0",
+      "@ui5/webcomponents": "~1.18.0",
+      "@ui5/webcomponents-fiori": "~1.18.0",
+      "@ui5/webcomponents-icons": "~1.18.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.17.0",
-    "@ui5/webcomponents-base": "~1.17.0",
-    "@ui5/webcomponents-fiori": "~1.17.0",
-    "@ui5/webcomponents-icons": "~1.17.0",
+    "@ui5/webcomponents": "~1.18.0",
+    "@ui5/webcomponents-base": "~1.18.0",
+    "@ui5/webcomponents-fiori": "~1.18.0",
+    "@ui5/webcomponents-icons": "~1.18.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/Toolbar/Toolbar.cy.tsx

@@ -563,7 +563,7 @@ describe('Toolbar', () => {
 
     cy.findByTestId('tb').focus();
     cy.findByTestId('tb').should('have.css', 'outlineStyle', 'none');
-    cy.findByTestId('tb').should('have.css', 'boxShadow', 'rgb(0, 112, 242) 0px 0px 0px 2px inset');
+    cy.findByTestId('tb').should('have.css', 'boxShadow', 'rgb(0, 50, 165) 0px 0px 0px 2px inset');
   });
 
   it('unique ids for overflow', () => {

packages/main/src/enums/ToolbarItemOverflowBehavior.ts

@@ -0,0 +1,5 @@
+// Generated file - do not change manually!
+
+import ToolbarItemOverflowBehavior from '@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js';
+
+export { ToolbarItemOverflowBehavior };

packages/main/src/enums/index.ts

@@ -87,6 +87,7 @@ export * from './TitleLevel.js';
 export * from './ToastPlacement.js';
 export * from './ToolbarAlign.js';
 export * from './ToolbarDesign.js';
+export * from './ToolbarItemOverflowBehavior.js';
 export * from './ToolbarStyle.js';
 export * from './UploadCollectionDnDOverlayMode.js';
 export * from './UploadState.js';

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

@@ -10,13 +10,6 @@ import type { UI5WCSlotsNode } from '../../types/index.js';
 interface BarAttributes {
   /**
    * Defines the component's design.
-   *
-   * **Note:** Available options are:
-   *
-   * *   `Header`
-   * *   `Subheader`
-   * *   `Footer`
-   * *   `FloatingFooter`
    */
   design?: BarDesign | keyof typeof BarDesign;
 }
@@ -25,11 +18,11 @@ export interface BarDomRef extends BarAttributes, Ui5DomRef {}
 
 export interface BarPropTypes extends BarAttributes, CommonProps {
   /**
-   * Defines the content in the middle of the bar
+   * Defines the content in the middle of the bar.
    */
   children?: ReactNode | ReactNode[];
   /**
-   * Defines the content at the end of the bar
+   * Defines the content at the end of the bar.
    *
    * __Note:__ This prop will be rendered as [slot](https://www.w3schools.com/tags/tag_slot.asp) (`slot="endContent"`).
    * 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.
@@ -39,7 +32,7 @@ export interface BarPropTypes extends BarAttributes, CommonProps {
    */
   endContent?: UI5WCSlotsNode | UI5WCSlotsNode[];
   /**
-   * Defines the content at the start of the bar
+   * Defines the content at the start of the bar.
    *
    * __Note:__ This prop will be rendered as [slot](https://www.w3schools.com/tags/tag_slot.asp) (`slot="startContent"`).
    * 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/Button/index.tsx

@@ -17,15 +17,6 @@ interface ButtonAttributes {
   accessibleNameRef?: string;
   /**
    * Defines the component design.
-   *
-   * **The available values are:**
-   *
-   * *   `Default`
-   * *   `Emphasized`
-   * *   `Positive`
-   * *   `Negative`
-   * *   `Transparent`
-   * *   `Attention`
    */
   design?: ButtonDesign | keyof typeof ButtonDesign;
   /**
@@ -58,14 +49,6 @@ interface ButtonAttributes {
   /**
    * Defines whether the button has special form-related functionality.
    *
-   * **The available values are:**
-   *
-   * *   `Button`
-   * *   `Submit`
-   * *   `Reset`
-   *
-   *
-   *
    * **Note:** For the `type` property to have effect, you must add the following import to your project: `import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`
    */
   type?: ButtonType | keyof typeof ButtonType;

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

@@ -55,14 +55,6 @@ interface DatePickerAttributes {
   value?: string;
   /**
    * Defines the value state of the component.
-   *
-   * Available options are:
-   *
-   * *   `None`
-   * *   `Error`
-   * *   `Warning`
-   * *   `Success`
-   * *   `Information`
    */
   valueState?: ValueState | keyof typeof ValueState;
   /**

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

@@ -62,14 +62,6 @@ interface DateRangePickerAttributes {
   value?: string;
   /**
    * Defines the value state of the component.
-   *
-   * Available options are:
-   *
-   * *   `None`
-   * *   `Error`
-   * *   `Warning`
-   * *   `Success`
-   * *   `Information`
    */
   valueState?: ValueState | keyof typeof ValueState;
   /**

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

@@ -58,14 +58,6 @@ interface DateTimePickerAttributes {
   value?: string;
   /**
    * Defines the value state of the component.
-   *
-   * Available options are:
-   *
-   * *   `None`
-   * *   `Error`
-   * *   `Warning`
-   * *   `Success`
-   * *   `Information`
    */
   valueState?: ValueState | keyof typeof ValueState;
   /**

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

@@ -32,9 +32,6 @@ interface DialogAttributes {
   resizable?: boolean;
   /**
    * Defines the state of the `Dialog`.
-   *
-   * Available options are: `"None"` (by default), `"Success"`, `"Warning"`, `"Information"` and `"Error"`.
-   *
    * **Note:** If `"Error"` and `"Warning"` state is set, it will change the accessibility role to "alertdialog", if the accessibleRole property is set to `"Dialog"`.
    */
   state?: ValueState | keyof typeof ValueState;

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

@@ -47,14 +47,6 @@ interface FileUploaderAttributes {
   value?: string;
   /**
    * Defines the value state of the component.
-   *
-   * Available options are:
-   *
-   * *   `None`
-   * *   `Error`
-   * *   `Warning`
-   * *   `Success`
-   * *   `Information`
    */
   valueState?: ValueState | keyof typeof ValueState;
 }

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

@@ -69,7 +69,7 @@ interface InputAttributes {
    */
   showSuggestions?: boolean;
   /**
-   * Defines the HTML type of the component. Available options are: `Text`, `Email`, `Number`, `Password`, `Tel`, and `URL`.
+   * Defines the HTML type of the component.
    *
    * **Notes:**
    *
@@ -85,14 +85,6 @@ interface InputAttributes {
   value?: string;
   /**
    * Defines the value state of the component.
-   *
-   * Available options are:
-   *
-   * *   `None`
-   * *   `Error`
-   * *   `Warning`
-   * *   `Success`
-   * *   `Information`
    */
   valueState?: ValueState | keyof typeof ValueState;
 }

packages/main/src/webComponents/MediaGallery/MediaGallery.stories.tsx

@@ -30,22 +30,22 @@ export const Default: Story = {
     return (
       <MediaGallery {...args}>
         <MediaGalleryItem>
-          <img src="https://sap.github.io/ui5-webcomponents/main/assets/images/HT-1000.jpg" />
+          <img src="https://sap.github.io/ui5-webcomponents/assets/images/HT-1000.jpg" />
         </MediaGalleryItem>
         <MediaGalleryItem>
-          <img src="https://sap.github.io/ui5-webcomponents/main/assets/images/HT-1010.jpg" />
+          <img src="https://sap.github.io/ui5-webcomponents/assets/images/HT-1010.jpg" />
         </MediaGalleryItem>
         <MediaGalleryItem>
-          <img src="https://sap.github.io/ui5-webcomponents/main/assets/images/HT-1022.jpg" />
+          <img src="https://sap.github.io/ui5-webcomponents/assets/images/HT-1022.jpg" />
         </MediaGalleryItem>
         <MediaGalleryItem>
-          <img src="https://sap.github.io/ui5-webcomponents/main/assets/images/HT-1030.jpg" />
+          <img src="https://sap.github.io/ui5-webcomponents/assets/images/HT-1030.jpg" />
         </MediaGalleryItem>
         <MediaGalleryItem>
-          <img src="https://sap.github.io/ui5-webcomponents/main/assets/images/HT-2002.jpg" />
+          <img src="https://sap.github.io/ui5-webcomponents/assets/images/HT-2002.jpg" />
         </MediaGalleryItem>
         <MediaGalleryItem>
-          <img src="https://sap.github.io/ui5-webcomponents/main/assets/images/HT-2026.jpg" />
+          <img src="https://sap.github.io/ui5-webcomponents/assets/images/HT-2026.jpg" />
         </MediaGalleryItem>
       </MediaGallery>
     );
@@ -57,12 +57,12 @@ export const CustomThumbnail: Story = {
     return (
       <MediaGallery {...args}>
         <MediaGalleryItem
-          thumbnail={<img src="https://sap.github.io/ui5-webcomponents/main/assets/images/HT-1000-small.jpg" />}
+          thumbnail={<img src="https://sap.github.io/ui5-webcomponents/assets/images/HT-1000-small.jpg" />}
         >
-          <img src="https://sap.github.io/ui5-webcomponents/main/assets/images/HT-1000.jpg" />
+          <img src="https://sap.github.io/ui5-webcomponents/assets/images/HT-1000.jpg" />
         </MediaGalleryItem>
         <MediaGalleryItem disabled>
-          <img src="https://sap.github.io/ui5-webcomponents/main/assets/images/HT-1010.jpg" />
+          <img src="https://sap.github.io/ui5-webcomponents/assets/images/HT-1010.jpg" />
         </MediaGalleryItem>
       </MediaGallery>
     );
@@ -80,10 +80,10 @@ export const InteractiveDisplayArea: Story = {
         <Toast ref={ref}>Display Area Clicked!</Toast>
         <MediaGallery {...args} interactiveDisplayArea onDisplayAreaClick={handleDisplayAreaClick}>
           <MediaGalleryItem>
-            <img src="https://sap.github.io/ui5-webcomponents/main/assets/images/HT-1000.jpg" />
+            <img src="https://sap.github.io/ui5-webcomponents/assets/images/HT-1000.jpg" />
           </MediaGalleryItem>
           <MediaGalleryItem selected>
-            <img src="https://sap.github.io/ui5-webcomponents/main/assets/images/HT-1010.jpg" />
+            <img src="https://sap.github.io/ui5-webcomponents/assets/images/HT-1010.jpg" />
           </MediaGalleryItem>
         </MediaGallery>
       </>

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

@@ -74,7 +74,7 @@ interface MultiInputAttributes {
    */
   showSuggestions?: boolean;
   /**
-   * Defines the HTML type of the component. Available options are: `Text`, `Email`, `Number`, `Password`, `Tel`, and `URL`.
+   * Defines the HTML type of the component.
    *
    * **Notes:**
    *
@@ -90,14 +90,6 @@ interface MultiInputAttributes {
   value?: string;
   /**
    * Defines the value state of the component.
-   *
-   * Available options are:
-   *
-   * *   `None`
-   * *   `Error`
-   * *   `Warning`
-   * *   `Success`
-   * *   `Information`
    */
   valueState?: ValueState | keyof typeof ValueState;
 }

packages/main/src/webComponents/Select/SelectDescription.md

@@ -1,3 +1,12 @@
+## Usage
+
+There are two main usages of the `Select`.
+
+1. With Option (`Option`) web component:  
+   The available options of the Select are defined by using the Option component. The Option comes with predefined design and layout, including `icon`, `text` and `additional-text`.
+2. With SelectMenu (`SelectMenu`) and SelectMenuOption (`SelectMenuOption`) web components:  
+   The SelectMenu can be used as alternative to define the Select's dropdown and can be used via the `menu` property of the Select to reference SelectMenu by its ID. The component gives the possibility to customize the Select's dropdown by slotting entirely custom options (via the SelectMenuOption component) and adding custom styles. **Note:** SelectMenu is a popover and placing it top-level in the HTML page is recommended, because some page styles (for example transitions) can misplace the SelectMenu.
+
 ## Keyboard Handling
 
 The `Select` provides advanced keyboard handling.

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

@@ -126,7 +126,7 @@ export interface SelectPropTypes extends SelectAttributes, Omit<CommonProps, 'on
 }
 
 /**
- * The `Select` component is used to create a drop-down list. The items inside the `Select` define the available options by using the `Option` component.
+ * The `Select` component is used to create a drop-down list.
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *

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

@@ -17,15 +17,6 @@ interface SplitButtonAttributes {
   activeIcon?: string;
   /**
    * Defines the component design.
-   *
-   * **The available values are:**
-   *
-   * *   `Default`
-   * *   `Emphasized`
-   * *   `Positive`
-   * *   `Negative`
-   * *   `Transparent`
-   * *   `Attention`
    */
   design?: ButtonDesign | keyof typeof ButtonDesign;
   /**