fix(Web Components): don't crash when single react element is used inside a slot fragment (#1316)

Author: MarcusNotheis

packages/main/src/internal/__snapshots__/withWebComponent.test.tsx.snap

@@ -15,6 +15,56 @@ exports[`withWebComponent conditional rendering 1`] = `
 </DocumentFragment>
 `;
 
+exports[`withWebComponent destruct fragments in slots 1`] = `
+<DocumentFragment>
+  <ui5-bar
+    design="Header"
+    ui5-bar=""
+  >
+    <span
+      slot="startContent"
+    >
+      I'm here!
+    </span>
+    <span
+      slot="startContent"
+    >
+      I'm here nested level 1!
+    </span>
+    <span
+      slot="startContent"
+    >
+      I'm here nested level 2!
+    </span>
+    <span
+      slot="startContent"
+    >
+      I'm the only child of a fragment in level 3!
+    </span>
+    <span
+      slot="startContent"
+    >
+      I'm the only child of a fragment in level 1!
+    </span>
+    <span
+      slot="startContent"
+    >
+      I'm the only child of a fragment in level 1!
+    </span>
+    <span
+      slot="startContent"
+    >
+      I'm in an array inside of a fragment!
+    </span>
+    <span
+      slot="startContent"
+    >
+      Me too!
+    </span>
+  </ui5-bar>
+</DocumentFragment>
+`;
+
 exports[`withWebComponent scoping 1`] = `
 <DocumentFragment>
   <ui5-button-ui5-wcr

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

@@ -87,6 +87,39 @@ describe('withWebComponent', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('destruct fragments in slots', () => {
+    const { asFragment } = render(
+      <Bar
+        startContent={
+          <>
+            {false && <span>I'm not here</span>}
+            <span>I'm here!</span>
+            <>
+              {false && <span>I'm not here</span>}
+              <span>I'm here nested level 1!</span>
+              <>
+                {false && <span>I'm not here</span>}
+                <span>I'm here nested level 2!</span>
+                <>
+                  <span>I'm the only child of a fragment in level 3!</span>
+                </>
+              </>
+            </>
+            <>
+              <span>I'm the only child of a fragment in level 1!</span>
+            </>
+            <>{false && <span>I'm an empty fragment</span>}</>
+            <>
+              <span>I'm the only child of a fragment in level 1!</span>
+              {[<span>I'm in an array inside of a fragment!</span>, <span>Me too!</span>]}
+            </>
+          </>
+        }
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('scoping', () => {
     setCustomElementsScopingSuffix('ui5-wcr');
     const { asFragment, rerender } = render(<Button>Scoping Test</Button>);

packages/main/src/internal/withWebComponent.tsx

@@ -1,6 +1,7 @@
 import { getEffectiveScopingSuffixForTag } from '@ui5/webcomponents-base/dist/CustomElementsScope';
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
 import React, {
+  Children,
   cloneElement,
   ComponentType,
   forwardRef,
@@ -23,8 +24,6 @@ const createEventPropName = (eventName) => `on${capitalizeFirstLetter(kebabToCam
 
 type EventHandler = (event: CustomEvent<unknown>) => void;
 
-const staticSlotStyle = { display: 'contents' };
-
 export interface WithWebComponentPropTypes extends CommonProps {
   ref?: Ref<any>;
   children?: any | void;
@@ -64,16 +63,18 @@ export const withWebComponent = <T extends Record<string, any>>(
 
       if (!slotValue) return acc;
 
-      let children = [];
+      const slottedChildren = [];
       let index = 0;
       const removeFragments = (element) => {
         if (!element) return;
-        if (element?.type === React.Fragment) {
-          element.props?.children?.forEach((item) => {
-            removeFragments(item);
-          });
+        if (element.type === React.Fragment) {
+          Children.toArray(element.props?.children)
+            .filter(Boolean)
+            .forEach((item) => {
+              removeFragments(item);
+            });
         } else {
-          children.push(
+          slottedChildren.push(
             cloneElement(element, {
               key: `${name}-${index}`,
               slot: name
@@ -90,7 +91,7 @@ export const withWebComponent = <T extends Record<string, any>>(
       } else {
         removeFragments(slotValue);
       }
-      return [...acc, ...children];
+      return [...acc, ...slottedChildren];
     }, []);
     // event binding
     useEffect(