feat: update @ui5/webcomponents to ~1.15.1 (#4811)

Co-authored-by: Lukas Harbarth <[email protected]>

Author: MarcusNotheis

package.json

@@ -35,9 +35,9 @@
     "@storybook/react": "7.0.24",
     "@storybook/react-vite": "7.0.24",
     "@storybook/theming": "7.0.24",
-    "@ui5/webcomponents": "1.14.5",
-    "@ui5/webcomponents-fiori": "1.14.5",
-    "@ui5/webcomponents-icons": "1.14.5",
+    "@ui5/webcomponents": "1.15.1",
+    "@ui5/webcomponents-fiori": "1.15.1",
+    "@ui5/webcomponents-icons": "1.15.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "remark-gfm": "^3.0.1",
@@ -57,7 +57,7 @@
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
-    "@ui5/webcomponents-tools": "1.14.5",
+    "@ui5/webcomponents-tools": "1.15.1",
     "@vitejs/plugin-react": "^4.0.0",
     "chromatic": "^6.5.3",
     "cypress": "^12.1.0",

packages/base/package.json

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

packages/charts/package.json

@@ -34,8 +34,8 @@
     "recharts": "2.7.1"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~1.16.0",
-    "@ui5/webcomponents-react-base": "~1.16.0",
+    "@ui5/webcomponents-react": "~1.17.0",
+    "@ui5/webcomponents-react-base": "~1.17.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.14.0",
-      "@ui5/webcomponents-fiori": "~1.14.0",
-      "@ui5/webcomponents-icons": "~1.14.0",
+      "@ui5/webcomponents": "~1.15.1",
+      "@ui5/webcomponents-fiori": "~1.15.1",
+      "@ui5/webcomponents-icons": "~1.15.1",
       "@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.14.0",
-      "@ui5/webcomponents-fiori": "~1.14.0",
-      "@ui5/webcomponents-icons": "~1.14.0",
+      "@ui5/webcomponents": "~1.15.1",
+      "@ui5/webcomponents-fiori": "~1.15.1",
+      "@ui5/webcomponents-icons": "~1.15.1",
       "@ui5/webcomponents-react": "latest",
       "web-vitals": "^2.1.0"
     },

packages/main/package.json

@@ -43,7 +43,7 @@
     "./dist/json-imports/*"
   ],
   "scripts": {
-    "clean": "rimraf dist tmp wrappers",
+    "clean": "rimraf dist tmp wrappers ssr",
     "build:i18n": "node scripts/generateI18n.mjs",
     "build:client": "babel src --out-dir dist --extensions .ts,.tsx --env-name client && tsc --declarationDir dist",
     "build:ssr": "babel src --out-dir ssr --extensions .ts,.tsx --env-name ssr && tsc --declarationDir ssr",
@@ -59,10 +59,10 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents": "~1.14.0",
-    "@ui5/webcomponents-base": "~1.14.0",
-    "@ui5/webcomponents-fiori": "~1.14.0",
-    "@ui5/webcomponents-icons": "~1.14.0",
+    "@ui5/webcomponents": "~1.15.1",
+    "@ui5/webcomponents-base": "~1.15.1",
+    "@ui5/webcomponents-fiori": "~1.15.1",
+    "@ui5/webcomponents-icons": "~1.15.1",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },

packages/main/scripts/create-web-components-wrapper.mjs

@@ -34,10 +34,6 @@ const EXCLUDE_LIST = [];
 const WEB_COMPONENTS_ROOT_DIR = path.join(PATHS.packages, 'main', 'src', 'webComponents');
 const ENUMS_DIR = path.join(PATHS.packages, 'main', 'src', 'enums');
 
-const EXTENDED_PROP_DESCRIPTION = {
-  primaryCalendarType: `<br/>__Note:__ Calendar types other than Gregorian must be imported manually:<br />\`import "@ui5/webcomponents-localization/dist/features/calendar/{primaryCalendarType}.js";\``
-};
-
 // use JSDoc syntax here
 const CUSTOM_MAIN_DESCRIPTION = {
   IllustratedMessage: (desc) => {
@@ -49,130 +45,6 @@ ${desc}
   }
 };
 
-const CUSTOM_DESCRIPTION_REPLACE = {
-  Avatar: {
-    icon: (desc) => desc.replace(`<ui5-avatar icon="employee">`, `\`<Avatar icon="employee">\``)
-  },
-  ComboBox: {
-    children: (desc) => {
-      return desc.replace(
-        `   * Example:  
-   * <ui5-combobox>  
-   *     <ui5-li>Item #1</ui5-li>  
-   *     <ui5-li>Item #2</ui5-li>  
-   * </ui5-combobox>`,
-        `   * Example:
-   *
-   * <pre>
-   *   <code>
-   *    &lt;ComboBox><br />
-   *    &nbsp;&nbsp;&lt;StandardListItem>Item #1&lt;/StandardListItem><br />
-   *    &nbsp;&nbsp;&lt;StandardListItem>Item #2&lt;/StandardListItem><br />
-   *    &lt;/ComboBox>
-   *  </code>
-   * </pre>`
-      );
-    }
-  },
-  Input: {
-    children: (description) => {
-      const formatExample = description.replace(
-        `   * Example:  
-   *   
-   * <ui5-input show-suggestions>  
-   *     <ui5-suggestion-item text="Item #1"></ui5-suggestion-item>  
-   *     <ui5-suggestion-item text="Item #2"></ui5-suggestion-item>  
-   * </ui5-input>  `,
-        `   * Example:
-   *
-   * <pre>
-   *   <code>
-   *    &lt;Input showSuggestions><br />
-   *    &nbsp;&nbsp;&lt;SuggestionItem text="Item #1" /><br />
-   *    &nbsp;&nbsp;&lt;SuggestionItem text="Item #2" /><br />
-   *    &lt;/Input>
-   *  </code>
-   * </pre>`
-      );
-      return formatExample.replace(/<ui5-suggestion-item>/g, '<SuggestionItem>');
-    }
-  },
-  MultiComboBox: {
-    children: (desc) => {
-      return desc.replace(
-        `   * Example:  
-   * <ui5-multi-combobox>  
-   *     <ui5-li>Item #1</ui5-li>  
-   *     <ui5-li>Item #2</ui5-li>  
-   * </ui5-multi-combobox>`,
-        `   * Example:
-   *
-   * <pre>
-   *   <code>
-   *    &lt;MultiComboBox><br />
-   *    &nbsp;&nbsp;&lt;StandardListItem>Item #1&lt;/StandardListItem><br />
-   *    &nbsp;&nbsp;&lt;StandardListItem>Item #2&lt;/StandardListItem><br />
-   *    &lt;/MultiComboBox>
-   *  </code>
-   * </pre>`
-      );
-    }
-  },
-  MultiInput: {
-    children: (description) => {
-      const formatExample = description.replace(
-        `   * Example:  
-   *   
-   * <ui5-input show-suggestions>  
-   *     <ui5-suggestion-item text="Item #1"></ui5-suggestion-item>  
-   *     <ui5-suggestion-item text="Item #2"></ui5-suggestion-item>  
-   * </ui5-input>  `,
-        `   * Example:
-   *
-   * <pre>
-   *   <code>
-   *    &lt;MultiInput showSuggestions><br />
-   *    &nbsp;&nbsp;&lt;SuggestionItem text="Item #1" /><br />
-   *    &nbsp;&nbsp;&lt;SuggestionItem text="Item #2" /><br />
-   *    &lt;/MultiInput>
-   *  </code>
-   * </pre>`
-      );
-      return formatExample.replace(/<ui5-suggestion-item>/g, '<SuggestionItem>');
-    },
-    tokens: (description) => {
-      return description.replace(
-        `   * Example:  
-   * <ui5-multi-input>  
-   *     <ui5-token slot="tokens" text="Token 1"></ui5-token>  
-   *     <ui5-token slot="tokens" text="Token 2"></ui5-token>  
-   * </ui5-multi-input>`,
-        `   * Example:
-   *
-   * <pre>
-   *   <code>
-   *    &lt;MultiInput<br />
-   *    &nbsp;tokens={<br />
-   *    &nbsp;&nbsp;&lt;><br />
-   *    &nbsp;&nbsp;&nbsp;&lt;Token text="Token 1" /><br />
-   *    &nbsp;&nbsp;&nbsp;&lt;Token text="Token 1" /><br />
-   *    &nbsp;&nbsp;&lt;/><br />
-   *    &nbsp;}<br />
-   *    />
-   *  </code>
-   * </pre>`
-      );
-    }
-  },
-  ShellBar: {
-    children: (desc) => {
-      return desc.replace('<ui5-shellbar-item></ui5-shellbar-item>', '`ShellBarItem`');
-    },
-    menuItems: (desc) => {
-      return desc.replace('<ui5-li></ui5-li>', '`StandardListItem`');
-    }
-  }
-};
 // todo: add StepInput when `onInput` is available (https://github.com/SAP/ui5-webcomponents/issues/5177)
 const INPUT_COMPONENTS = new Set([
   'ComboBox',
@@ -213,7 +85,7 @@ for (const spec of allWebComponents) {
 const filterNonPublicAttributes = (prop) =>
   prop.visibility === 'public' && prop.readonly !== 'true' && prop.static !== true;
 
-const replaceTagNameWithModuleName = (description) => {
+export const replaceTagNameWithModuleName = (description) => {
   let parsedDescription = description.replace(/(ui5-[\w-]+)/g, (fullMatch, tag, ...args) => {
     if (tag === 'ui5-link') return tag;
     if (tag === 'ui5-webcomponents-react') return tag;
@@ -340,6 +212,7 @@ const createWebComponentWrapper = async (
     attributes,
     slotsAndEvents,
     description: componentDescription,
+    ui5wcPackage: componentSpec.name.includes('fiori') ? 'fiori' : 'main',
     tagName: componentSpec.tagname,
     regularProps,
     booleanProps,
@@ -443,6 +316,9 @@ const resolveInheritedAttributes = (componentSpec) => {
   ...mainWebComponentsSpec.symbols.filter((spec) => spec.module.startsWith('types/') && spec.visibility === 'public'),
   ...fioriWebComponentsSpec.symbols.filter((spec) => spec.module.startsWith('types/') && spec.visibility === 'public')
 ].forEach((spec) => {
+  if (spec.module === 'HasPopup') {
+    return;
+  }
   const template = dedent`
   // Generated file - do not change manually! 
   
@@ -457,32 +333,6 @@ const resolveInheritedAttributes = (componentSpec) => {
   writeFileSync(path.join(ENUMS_DIR, `${spec.basename}.ts`), prettier.format(template, Utils.prettierConfig));
 });
 
-const propDescription = (componentSpec, property) => {
-  if (!componentSpec.tagname) {
-    return property.description || '';
-  }
-  let formattedDescription = Utils.formatDescription(property.description, componentSpec);
-
-  const customDescriptionReplace = CUSTOM_DESCRIPTION_REPLACE[componentSpec.module];
-  if (customDescriptionReplace && customDescriptionReplace[property.name]) {
-    formattedDescription = customDescriptionReplace[property.name](formattedDescription);
-  }
-
-  const extendedDescription = EXTENDED_PROP_DESCRIPTION[property.name] ?? '';
-
-  if (property.name !== 'children' && componentSpec?.slots?.some((item) => item.name === property.name)) {
-    formattedDescription += `
-          *
-          * __Note:__ This prop will be rendered as [slot](https://www.w3schools.com/tags/tag_slot.asp) (\`slot="${property.name}"\`). 
-          * 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/?path=/docs/knowledge-base-handling-slots--docs).`;
-  }
-
-  return replaceTagNameWithModuleName(`${formattedDescription}${extendedDescription}`);
-};
-
 allWebComponents
   .filter((spec) => spec.visibility === 'public')
   .filter((spec) => !PRIVATE_COMPONENTS[spec.module])
@@ -505,7 +355,7 @@ allWebComponents
 
         attributes.push(dedent`
         /**
-         * ${propDescription(componentSpec, property)}
+         * ${Utils.propDescription(componentSpec, property)}
          */
          ${property.name}?: ${tsType.tsType};
         `);
@@ -546,7 +396,7 @@ allWebComponents
 
           slotsAndEvents.push(dedent`
         /**
-         * ${propDescription(componentSpec, property)}
+         * ${Utils.propDescription(componentSpec, property)}
          */
          ${property.name}?: ${tsType.tsType};
         `);

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

@@ -59,7 +59,8 @@ const useStyles = createUseStyles(
   { name: 'MessageViewButtonStyles' }
 );
 
-export interface MessageViewButtonProptypes extends Omit<ButtonPropTypes, 'design' | 'icon' | 'iconEnd' | 'children'> {
+export interface MessageViewButtonProptypes
+  extends Omit<ButtonPropTypes, 'design' | 'icon' | 'iconEnd' | 'children' | 'type'> {
   /**
    * Specifies the type of the button.
    */

packages/main/src/enums/ButtonType.ts

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

packages/main/src/enums/index.ts

@@ -17,6 +17,7 @@ export * from './BreadcrumbsDesign.js';
 export * from './BreadcrumbsSeparatorStyle.js';
 export * from './BusyIndicatorSize.js';
 export * from './ButtonDesign.js';
+export * from './ButtonType.js';
 export * from './CalendarSelection.js';
 export * from './CalendarSelectionMode.js';
 export * from './CalendarType.js';

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

@@ -109,7 +109,7 @@ export interface AvatarPropTypes extends AvatarAttributes, CommonProps {
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/components/Avatar" target="_blank">UI5 Web Components Playground</ui5-link>
+ * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Avatar" target="_blank">UI5 Web Components Storybook</ui5-link>
  */
 const Avatar = withWebComponent<AvatarPropTypes, AvatarDomRef>(
   'ui5-avatar',

packages/main/src/webComponents/AvatarGroup/AvatarGroupDescription.md

@@ -18,7 +18,7 @@ Do not use the `AvatarGroup` if:
 ## Keyboard Handling
 
 The component provides advanced keyboard handling. When focused, the user can use the following keyboard shortcuts in order to perform a navigation:  
-\- `type` Individual:
+`type` Individual:
 
 - \[TAB\] - Move focus to the overflow button
 - \[LEFT\] - Navigate one avatar to the left
@@ -27,7 +27,7 @@ The component provides advanced keyboard handling. When focused, the user can us
 - \[END\] - Navigate to the last avatar
 - \[SPACE\],\[ENTER\],\[RETURN\] - Trigger `undefined` event
 
-\- `type` Group:
+`type` Group:
 
 - \[TAB\] - Move focus to the next interactive element after the component
 - \[SPACE\],\[ENTER\],\[RETURN\] - Trigger `undefined` event

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
 export const Avatar1 = (
-  <img src="https://sap.github.io/ui5-webcomponents/main/assets/images/avatars/woman_avatar_5.png" />
+  <img src="https://sap.github.io/ui5-webcomponents/assets/images/avatars/woman_avatar_5.png" alt="Avatar1" />
 );
 export const Avatar2 = (
-  <img src="https://sap.github.io/ui5-webcomponents/main/assets/images/avatars/man_avatar_3.png" />
+  <img src="https://sap.github.io/ui5-webcomponents/assets/images/avatars/man_avatar_3.png" alt="Avatar2" />
 );