fix(withWebComponent): fix handling of react fragments as slots (#446)

Author: Lukas742

packages/main/src/internal/withWebComponent.tsx

@@ -70,11 +70,13 @@ export const withWebComponent = <T extends {}>(
         return Object.entries(rest)
           .filter(([slotName]) => slotProperties.includes(slotName))
           .map(([slotName, slotValue]) => {
-            return Children.map(slotValue, (item: ReactElement, index) =>
-              cloneElement(item, {
-                key: `${slotName}-${index}`,
-                slot: slotName
-              })
+            return Children.map(
+              slotValue?.type === React.Fragment ? slotValue.props.children : slotValue,
+              (item: ReactElement, index) =>
+                cloneElement(item, {
+                  key: `${slotName}-${index}`,
+                  slot: slotName
+                })
             );
           });
       },

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

@@ -25,19 +25,15 @@ export const generatedDefaultStory = () => (
         <TableColumn style={{ width: '12rem' }}>
           <Label>Product</Label>
         </TableColumn>
-
         <TableColumn minWidth={800} popinText="Supplier">
           <Label>Supplier</Label>
         </TableColumn>
-
         <TableColumn minWidth={600} popinText="Dimensions" demandPopin>
           <Label>Dimensions</Label>
         </TableColumn>
-
         <TableColumn minWidth={600} popinText="Weight" demandPopin>
           <Label>Weight</Label>
         </TableColumn>
-
         <TableColumn>
           <Label>Price</Label>
         </TableColumn>