feat: update @ui5/webcomponents to 1.17.0

.storybook/components/Footer.module.css

@@ -13,7 +13,6 @@
   align-items: center;
   background-color: var(--sapPageFooter_Background);
   border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
-  height: var(--_ui5_bar_base_height);
   overflow: hidden;
 }
 

docs/knowledge-base/CustomComponentsSlots.mdx

@@ -54,5 +54,4 @@ Now the `BarComponent` would compile to this:
 
 <BarComponent />
 
-<div style={{ height: 'var(--_ui5_bar_base_height)' }} />
-<Footer style={{ position: 'fixed', bottom: 0, zIndex: 2, maxHeight: 'var(--_ui5_bar_base_height)' }} />
+<Footer style={{ position: 'fixed', bottom: 0, zIndex: 2 }} />

docs/knowledge-base/Portals.mdx

@@ -61,5 +61,4 @@ Then, set the `portalContainer` to the respective element.
 />
 ```
 
-<div style={{ height: 'var(--_ui5_bar_base_height)' }} />
-<Footer style={{ position: 'fixed', bottom: 0, zIndex: 2, maxHeight: 'var(--_ui5_bar_base_height)' }} />
+<Footer style={{ position: 'fixed', bottom: 0, zIndex: 2 }} />

docs/knowledge-base/TestingWithJest.mdx

@@ -116,5 +116,4 @@ jest.mock('react', () => {
 
 Now you should be able to run your test by using `npm run test` or `yarn test`.
 
-<div style={{ height: 'var(--_ui5_bar_base_height)' }} />
-<Footer style={{ position: 'fixed', bottom: 0, zIndex: 2, maxHeight: 'var(--_ui5_bar_base_height)' }} />
+<Footer style={{ position: 'fixed', bottom: 0, zIndex: 2 }} />

package.json

@@ -20,7 +20,7 @@
     "test": "yarn test:prepare && yarn test:cypress",
     "clean": "tsc --build --clean && rimraf temp .out && lerna run clean",
     "clean:remove-modules": "yarn clean && rimraf node_modules",
-    "prettier:all": "prettier --write --config ./prettier.config.cjs \"packages/**/*.{js,jsx,ts,tsx,mdx,json}\"",
+    "prettier:all": "prettier --write --config ./prettier.config.cjs \"packages/**/*.{js,jsx,ts,tsx,mdx,json,md}\"",
     "lint": "eslint packages --ext .ts,.tsx",
     "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
     "create-webcomponents-wrapper": "node --experimental-json-modules ./packages/main/scripts/create-web-components-wrapper.mjs && node --experimental-json-modules ./scripts/generate-theming-parameters.js",
@@ -37,9 +37,9 @@
     "@storybook/react": "7.3.2",
     "@storybook/react-vite": "7.3.2",
     "@storybook/theming": "7.3.2",
-    "@ui5/webcomponents": "1.16.0",
-    "@ui5/webcomponents-fiori": "1.16.0",
-    "@ui5/webcomponents-icons": "1.16.0",
+    "@ui5/webcomponents": "1.17.0",
+    "@ui5/webcomponents-fiori": "1.17.0",
+    "@ui5/webcomponents-icons": "1.17.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "remark-gfm": "^3.0.1",
@@ -59,7 +59,7 @@
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@ui5/webcomponents-tools": "1.16.0",
+    "@ui5/webcomponents-tools": "1.17.0",
     "@vitejs/plugin-react": "^4.0.0",
     "chromatic": "^6.5.3",
     "cssnano": "^6.0.1",

packages/base/package.json

@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "@ui5/webcomponents-base": "~1.16.0",
+    "@ui5/webcomponents-base": "~1.17.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.18.0",
-    "@ui5/webcomponents-react-base": "~1.18.0",
+    "@ui5/webcomponents-react": "~1.19.0",
+    "@ui5/webcomponents-react-base": "~1.19.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.16.0",
-      "@ui5/webcomponents-fiori": "~1.16.0",
-      "@ui5/webcomponents-icons": "~1.16.0",
+      "@ui5/webcomponents": "~1.17.0",
+      "@ui5/webcomponents-fiori": "~1.17.0",
+      "@ui5/webcomponents-icons": "~1.17.0",
       "@ui5/webcomponents-react": "latest",
       "axios": "^0.27.2",
       "formik": "^2.2.9",

packages/cra-template-seed/template/src/components/Shell/Shell.js

@@ -1,13 +1,13 @@
+import { getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsScope.js';
+import { Avatar, AvatarShape, ShellBar } from '@ui5/webcomponents-react';
 import React, { useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-
-import { Avatar, AvatarShape, ShellBar } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-icons/dist/customer.js';
+import { ROUTES } from '../../routes/Routes';
+import LanguageSwitch from '../LanguageSwitch/LanguageSwitch';
 import PopoverListItems from '../Popover/List/PopoverListItems';
 import ThemeSwitch from '../ThemeSwitch/ThemeSwitch';
-import LanguageSwitch from '../LanguageSwitch/LanguageSwitch';
-import { ROUTES } from '../../routes/Routes';
 
 const style = {
   shell: {
@@ -16,7 +16,7 @@ const style = {
     zIndex: 100
   },
   emptySpace: {
-    paddingTop: 'var(--_ui5_shellbar_root_height)'
+    paddingTop: getScopedVarName('--_ui5_shellbar_root_height')
   }
 };
 

packages/cra-template/template.json

@@ -1,9 +1,9 @@
 {
   "package": {
     "dependencies": {
-      "@ui5/webcomponents": "~1.16.0",
-      "@ui5/webcomponents-fiori": "~1.16.0",
-      "@ui5/webcomponents-icons": "~1.16.0",
+      "@ui5/webcomponents": "~1.17.0",
+      "@ui5/webcomponents-fiori": "~1.17.0",
+      "@ui5/webcomponents-icons": "~1.17.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.16.0",
-    "@ui5/webcomponents-base": "~1.16.0",
-    "@ui5/webcomponents-fiori": "~1.16.0",
-    "@ui5/webcomponents-icons": "~1.16.0",
+    "@ui5/webcomponents": "~1.17.0",
+    "@ui5/webcomponents-base": "~1.17.0",
+    "@ui5/webcomponents-fiori": "~1.17.0",
+    "@ui5/webcomponents-icons": "~1.17.0",
     "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

@@ -23,7 +23,11 @@ import {
   getDomRefMethods,
   getDomRefObjects
 } from '../../../scripts/web-component-wrappers/utils.js';
-import versionInfo from '../../../scripts/web-component-wrappers/version-info.json' assert { type: 'json' };
+import publicVersionInfo from '../../../scripts/web-component-wrappers/version-info.json' assert { type: 'json' };
+import internalVersionInfo from '../../../scripts/web-component-wrappers/version-info-internal.json' assert { type: 'json' };
+import { setTimeout } from 'node:timers/promises';
+
+const versionInfo = { ...publicVersionInfo, ...internalVersionInfo };
 
 // To only create a single component, replace "false" with the component (module) name
 // or execute the following command: "yarn create-webcomponents-wrapper [name]"
@@ -61,8 +65,24 @@ const INPUT_COMPONENTS = new Set([
 const componentsFromFioriPackage = new Set(fioriWebComponentsSpec.symbols.map((componentSpec) => componentSpec.module));
 
 const interfaces = new Set();
+
+// currently only applied to main wc package
+const MODULE_NAME_REPLACEMENT = {
+  Toolbar: 'ToolbarV2',
+  ToolbarSeparator: 'ToolbarSeparatorV2',
+  ToolbarSpacer: 'ToolbarSpacerV2'
+};
 const allWebComponents = [
-  ...mainWebComponentsSpec.symbols.filter((spec) => !spec.module.startsWith('types/')),
+  ...mainWebComponentsSpec.symbols
+    .filter((spec) => !spec.module.startsWith('types/'))
+    .map((item) => {
+      if (MODULE_NAME_REPLACEMENT[item.module]) {
+        item.name = item.name.replace(item.module, MODULE_NAME_REPLACEMENT[item.module]);
+        item.basename = MODULE_NAME_REPLACEMENT[item.module];
+        item.module = MODULE_NAME_REPLACEMENT[item.module];
+      }
+      return item;
+    }),
   ...fioriWebComponentsSpec.symbols.filter((spec) => !spec.module.startsWith('types/'))
 ].filter((item) => {
   if (item.kind === 'interface') {
@@ -199,7 +219,7 @@ const createWebComponentWrapper = async (
   const domRef = Utils.createDomRef(componentSpec, importStatements);
   const importSpecifier = `@ui5/webcomponents${
     componentsFromFioriPackage.has(componentSpec.module) ? '-fiori' : ''
-  }/dist/${componentSpec.module}.js`;
+  }/dist/${componentSpec.resource}`;
 
   const imports = [`import '${importSpecifier}';`, ...new Set(importStatements)];
 
@@ -221,10 +241,10 @@ const createWebComponentWrapper = async (
     eventProps,
     defaultProps,
     domRef,
-    baseComponentName:
-      typeof COMPONENTS_WITHOUT_DEMOS[componentSpec.module] === 'string'
-        ? COMPONENTS_WITHOUT_DEMOS[componentSpec.module]
-        : componentSpec.module
+    baseComponentName: (typeof COMPONENTS_WITHOUT_DEMOS[componentSpec.module] === 'string'
+      ? COMPONENTS_WITHOUT_DEMOS[componentSpec.module]
+      : componentSpec.module
+    ).replace('V2', '')
   });
 };
 
@@ -344,11 +364,22 @@ allWebComponents
     const slotsAndEvents = [];
     const importStatements = [];
     const defaultProps = [];
+    if (componentSpec.properties) {
+      componentSpec.properties = componentSpec.properties.filter((item) => {
+        return !item.description.includes('is inherited and not supported');
+      });
+    }
+    if (componentSpec.slots) {
+      componentSpec.slots = componentSpec.slots.filter((item) => {
+        return !item.description.includes('is inherited and not supported');
+      });
+    }
     const allComponentProperties = (componentSpec.properties || [])
-      .filter(
-        (prop) =>
+      .filter((prop) => {
+        return (
           prop.visibility === 'public' && prop.readonly !== 'true' && prop.static !== true && prop.type !== 'object'
-      )
+        );
+      })
       .map((property) => {
         const tsType = Utils.getTypeDefinitionForProperty(property);
         if (tsType.importStatement) {
@@ -476,6 +507,7 @@ allWebComponents
       !EXCLUDE_LIST.includes(componentSpec.module)
     ) {
       const regularPropsToOmit = new Set(['boolean', 'Boolean', 'object', 'Object']);
+
       const webComponentWrapper = await createWebComponentWrapper(
         componentSpec,
         mainDescription,
@@ -498,24 +530,34 @@ allWebComponents
 
       // create test
       if (!existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.cy.tsx`))) {
-        const webComponentTest = renderTest({ name: componentSpec.module, tagname: componentSpec.tagname });
+        const webComponentTest = await renderTest({ name: componentSpec.module, tagname: componentSpec.tagname });
         writeFileSync(path.join(webComponentFolderPath, `${componentSpec.module}.cy.tsx`), webComponentTest);
       }
 
       // create demo
       const componentWithoutDemo = COMPONENTS_WITHOUT_DEMOS[componentSpec.module];
       // create subcomponent description
       if (typeof componentWithoutDemo === 'string') {
-        const since = componentSpec.since ? `<b>Since:</b> ${versionInfo[componentSpec.since]}<br/>` : '';
+        let since = '';
+        if (componentSpec.since) {
+          if (!versionInfo[componentSpec.since]) {
+            throw new Error(
+              `${componentSpec.module}: Ui5Wc version is not compatible with version-info.json! Please add it to version-info-internal.json`
+            );
+          }
+          since = `**Since:** ${versionInfo[componentSpec.since]}\n`;
+        }
         const abstractDescription = componentSpec.abstract
           ? `<b>Abstract UI5 Web Component</b> - Find out more about abstract components <a href="https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-faq--docs#what-are-abstract-ui5-web-components" target="_blank">here</a>.<br/><br/>`
-          : '</br>';
-        mainDescription = `${since}${abstractDescription}${mainDescription}`;
-        const subComponentDescription = `${await formatDemoDescription(
-          mainDescription,
+          : '';
+        mainDescription = `${abstractDescription}${mainDescription}`;
+        const subComponentDescription = `${since}${
+          !abstractDescription && since ? '\n' : ''
+        }${await formatDemoDescription(mainDescription, componentSpec, false)}\n${await formatDemoDescription(
+          description,
           componentSpec,
           false
-        )}\n${await formatDemoDescription(description, componentSpec, false)}`;
+        )}`;
         writeFileSync(
           path.join(webComponentFolderPath, `${componentSpec.module}Description.md`),
           subComponentDescription
@@ -584,4 +626,7 @@ writeFileSync(
     .join('\n')
 );
 
-spawnSync('prettier', [WEB_COMPONENTS_ROOT_DIR, '--write'], { stdio: [0, 1, 2] });
+console.log('~~~~~', 'TIMEOUT', '~~~~~');
+await setTimeout(2000);
+
+spawnSync('yarn', ['prettier:all'], { stdio: [0, 1, 2], cwd: PATHS.root });

packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.jss.ts

@@ -1,4 +1,10 @@
 import { spacing, ThemingParameters } from '@ui5/webcomponents-react-base';
+import { cssVarVersionInfoPrefix } from '../../internal/utils.js';
+
+const _cardHeaderFocusOffset = `var(${cssVarVersionInfoPrefix}card_header_focus_offset)`;
+const _cardHeaderFocusBorder = `var(${cssVarVersionInfoPrefix}card_header_focus_border)`;
+const _cardHeaderFocusRadius = `var(${cssVarVersionInfoPrefix}card_header_focus_radius)`;
+const _cardHeaderFocusBottomRadius = `var(${cssVarVersionInfoPrefix}card_header_focus_bottom_radius)`;
 
 const styles = {
   helpText: {
@@ -15,16 +21,16 @@ const styles = {
       outline: 'none',
       content: '""',
       position: 'absolute',
-      border: 'var(--_ui5_card_header_focus_border)',
+      border: _cardHeaderFocusBorder,
       pointerEvents: 'none',
-      top: 'var(--_ui5_card_header_focus_offset)',
-      left: 'var(--_ui5_card_header_focus_offset)',
-      right: 'var(--_ui5_card_header_focus_offset)',
-      bottom: 'var(--_ui5_card_header_focus_offset)',
-      borderTopLeftRadius: 'var(--_ui5_card_header_focus_radius)',
-      borderTopRightRadius: 'var(--_ui5_card_header_focus_radius)',
-      borderBottomLeftRadius: 'var(--_ui5_card_header_focus_bottom_radius)',
-      borderBottomRightRadius: 'var(--_ui5_card_header_focus_bottom_radius)'
+      top: _cardHeaderFocusOffset,
+      left: _cardHeaderFocusOffset,
+      right: _cardHeaderFocusOffset,
+      bottom: _cardHeaderFocusOffset,
+      borderTopLeftRadius: _cardHeaderFocusRadius,
+      borderTopRightRadius: _cardHeaderFocusRadius,
+      borderBottomLeftRadius: _cardHeaderFocusBottomRadius,
+      borderBottomRightRadius: _cardHeaderFocusBottomRadius
     },
     '&:focus-visible': {
       outline: 'none'

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

@@ -46,12 +46,6 @@ const styles = {
       padding: 0
     }
   },
-  filterListItem: {
-    height: 'var(--_ui5_list_item_base_height)'
-  },
-  filter: {
-    height: 'var(--_ui5_list_item_base_height)'
-  },
   filterIcon: {
     paddingInlineEnd: '0.5rem',
     minWidth: '1rem',
@@ -231,12 +225,8 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
         )}
         {showFilter && (
           //todo maybe need to enhance Input selection after ui5-webcomponents issue has been fixed (undefined is displayed as val)
-          <CustomListItem
-            type={ListItemType.Inactive}
-            className={classes.filterListItem}
-            onKeyDown={handleCustomLiKeyDown}
-          >
-            <FlexBox alignItems={FlexBoxAlignItems.Center} className={classes.filter}>
+          <CustomListItem type={ListItemType.Inactive} onKeyDown={handleCustomLiKeyDown}>
+            <FlexBox alignItems={FlexBoxAlignItems.Center}>
               <Icon name={iconFilter} className={classes.filterIcon} aria-hidden />
               <Filter column={column} popoverRef={ref} />
             </FlexBox>

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

@@ -10,8 +10,17 @@ import type { CSSProperties } from 'react';
 import { createUseStyles } from 'react-jss';
 import { COLLAPSE_HEADER, EXPAND_HEADER, PIN_HEADER, UNPIN_HEADER } from '../../i18n/i18n-defaults.js';
 import type { CommonProps } from '../../interfaces/index.js';
+import { cssVarVersionInfoPrefix } from '../../internal/utils.js';
 import { Button, ToggleButton } from '../../webComponents/index.js';
 
+const _buttonBaseMinWidth = `${cssVarVersionInfoPrefix}button_base_min_width`;
+const _buttonBaseHeight = `${cssVarVersionInfoPrefix}button_base_height`;
+
+const anchorButtonVariables = {
+  [_buttonBaseMinWidth]: '1.5rem',
+  [_buttonBaseHeight]: '1.5rem'
+} as CSSProperties;
+
 const anchorBarStyles = {
   container: {
     position: 'absolute',
@@ -33,7 +42,7 @@ const anchorBarStyles = {
     }
   },
   anchorBarActionButton: {
-    '--_ui5wcr_anchor-btn-center': `calc((var(--_ui5_button_base_min_width) - var(--sapButton_BorderWidth)) / 2)`,
+    '--_ui5wcr_anchor-btn-center': `calc((var(${_buttonBaseMinWidth}) - ${ThemingParameters.sapButton_BorderWidth}) / 2)`,
     position: 'absolute',
     insetBlockStart: `calc(-1 * var(--_ui5wcr_anchor-btn-center))`,
     insetInlineStart: 'calc(50% - var(--_ui5wcr_anchor-btn-center))',
@@ -100,11 +109,6 @@ interface DynamicPageAnchorBarPropTypes extends CommonProps {
   onPinnedStateChange?: (pinned: boolean) => void;
 }
 
-const anchorButtonVariables = {
-  '--_ui5_button_base_min_width': '1.5rem',
-  '--_ui5_button_base_height': '1.5rem'
-} as CSSProperties;
-
 /**
  * The dynamic page anchor bar contains the expand/collapse (expands or collapses the header content)
  * and pin button (pins the content header).