Fix ToggleGroup children prop handling to avoid crashing with non-element children

packages/react-core/src/components/ToggleGroup/ToggleGroup.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
-import { ToggleGroupItem } from './ToggleGroupItem';
+import { ToggleGroupItem, ToggleGroupItemProps } from './ToggleGroupItem';
 
 export interface ToggleGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the toggle group */
@@ -24,12 +24,11 @@ export const ToggleGroup: React.FunctionComponent<ToggleGroupProps> = ({
   'aria-label': ariaLabel,
   ...props
 }: ToggleGroupProps) => {
-  const toggleGroupItemList = React.Children.map(children, child => {
-    const childCompName = (child as any).type.name;
-    return childCompName !== ToggleGroupItem.name
+  const toggleGroupItemList = React.Children.map(children, child =>
+    !(React.isValidElement(child) && child.type === ToggleGroupItem)
       ? child
-      : React.cloneElement(child as React.ReactElement, areAllGroupsDisabled ? { isDisabled: true } : {});
-  });
+      : React.cloneElement<ToggleGroupItemProps>(child, areAllGroupsDisabled ? { isDisabled: true } : {})
+  );
 
   return (
     <div

packages/react-core/src/components/ToggleGroup/__tests__/ToggleGroup.test.tsx

@@ -42,7 +42,7 @@ describe('ToggleGroup', () => {
 
   test('item passes selection and event to onChange handler', async () => {
     const user = userEvent.setup();
-    
+
     render(
       <ToggleGroupItem text="test" buttonId="toggleGroupItem" onChange={props.onChange} aria-label="onChange handler" />
     );
@@ -60,4 +60,17 @@ describe('ToggleGroup', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('should render non-ToggleGroupItem children', () => {
+    const { asFragment } = render(
+      <ToggleGroup isCompact aria-label="non-element children">
+        <ToggleGroupItem text="Test" />
+        {false && <ToggleGroupItem text="Test2" />}
+        {'Test 3'}
+        {undefined}
+        {null}
+      </ToggleGroup>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroup.test.tsx.snap

@@ -129,3 +129,30 @@ exports[`ToggleGroup isDisabled 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`ToggleGroup should render non-ToggleGroupItem children 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="non-element children"
+    class="pf-c-toggle-group pf-m-compact"
+    role="group"
+  >
+    <div
+      class="pf-c-toggle-group__item"
+    >
+      <button
+        aria-pressed="false"
+        class="pf-c-toggle-group__button"
+        type="button"
+      >
+        <span
+          class="pf-c-toggle-group__text"
+        >
+          Test
+        </span>
+      </button>
+    </div>
+    Test 3
+  </div>
+</DocumentFragment>
+`;