fix(withWebcomponent): correctly propagate/set key for slot components (#5230)

Author: Lukas742

.github/workflows/test.yml

@@ -19,6 +19,7 @@ jobs:
           - charts
           - cypress-commands
           - main/src/components
+          - main/src/internal
       fail-fast: false
 
     steps:
@@ -51,4 +52,4 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           parallel-finished: true
-          carryforward: 'base,charts,cypress-commands,main/src/components'
+          carryforward: 'base,charts,cypress-commands,main/src/components,main/src/internal'

packages/main/src/internal/withWebComponent.cy.tsx

@@ -79,6 +79,8 @@ describe('withWebComponent', () => {
       <Bar
         startContent={
           <>
+            {true}
+            not mounted
             {false && <span>not mounted</span>}
             <span>mounted</span>
             <>

packages/main/src/internal/withWebComponent.tsx

@@ -2,8 +2,8 @@
 
 import { getEffectiveScopingSuffixForTag } from '@ui5/webcomponents-base/dist/CustomElementsScope.js';
 import { useIsomorphicLayoutEffect, useSyncRef } from '@ui5/webcomponents-react-base';
-import type { ComponentType, ReactElement, Ref } from 'react';
-import React, { Children, cloneElement, forwardRef, Fragment, useEffect, useState } from 'react';
+import type { ComponentType, ReactElement, ReactNode, Ref } from 'react';
+import React, { cloneElement, forwardRef, Fragment, isValidElement, useEffect, useState } from 'react';
 import type { CommonProps, Ui5DomRef } from '../interfaces/index.js';
 import { useServerSideEffect } from './ssr.js';
 import { camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase } from './utils.js';
@@ -77,18 +77,25 @@ export const withWebComponent = <Props extends Record<string, any>, RefType = Ui
 
       const slottedChildren = [];
       let index = 0;
-      const removeFragments = (element) => {
-        if (!element) return;
+      const removeFragments = (element: ReactNode) => {
+        if (!isValidElement(element)) return;
         if (element.type === Fragment) {
-          Children.toArray(element.props?.children)
-            .filter(Boolean)
-            .forEach((item) => {
-              removeFragments(item);
+          const elementChildren = element.props?.children;
+          if (Array.isArray(elementChildren)) {
+            elementChildren.forEach((item) => {
+              if (Array.isArray(item)) {
+                item.forEach(removeFragments);
+              } else {
+                removeFragments(item);
+              }
             });
+          } else {
+            removeFragments(elementChildren);
+          }
         } else {
           slottedChildren.push(
-            cloneElement(element, {
-              key: `${name}-${index}`,
+            cloneElement<Partial<HTMLElement>>(element, {
+              key: element.key ?? `${name}-${index}`,
               slot: name
             })
           );