fix(16916): adds React fragment support for Switcher's direct child

packages/react/src/components/UIShell/Switcher.tsx

@@ -78,7 +78,13 @@ const Switcher = forwardRef<HTMLUListElement, SwitcherProps>(function Switcher(
     currentIndex: number;
     direction: number;
   }) => {
-    const enabledIndices = React.Children.toArray(children).reduce<number[]>(
+    const flattenedChildren = React.Children.toArray(children).flatMap(
+      (child) =>
+        React.isValidElement(child) && child.type === React.Fragment
+          ? React.Children.toArray(child.props.children)
+          : child
+    );
+    const enabledIndices = flattenedChildren.reduce<number[]>(
       (acc, curr, i) => {
         if (Object.keys((curr as any).props).length !== 0) {
           acc.push(i);
@@ -109,30 +115,40 @@ const Switcher = forwardRef<HTMLUListElement, SwitcherProps>(function Switcher(
     }
   };
 
-  const childrenWithProps = React.Children.toArray(children).map(
+  const childrenWithProps = React.Children.toArray(children).flatMap(
     (child, index) => {
-      // only setup click handlers if onChange event is passed
-      if (
-        React.isValidElement(child) &&
-        child.type &&
-        getDisplayName(child.type) === 'Switcher'
-      ) {
-        return React.cloneElement(child as React.ReactElement<any>, {
-          handleSwitcherItemFocus,
-          index,
-          key: index,
-          expanded,
-        });
+      if (React.isValidElement(child)) {
+        if (child.type === React.Fragment) {
+          // Handle React.Fragment case
+          return React.Children.toArray(child.props.children).map(
+            (fragmentChild, fragmentIndex) =>
+              React.isValidElement(fragmentChild)
+                ? React.cloneElement(fragmentChild as React.ReactElement<any>, {
+                    handleSwitcherItemFocus,
+                    index: `${index}-${fragmentIndex}`,
+                    key: `${index}-${fragmentIndex}`,
+                    expanded,
+                  })
+                : fragmentChild
+          );
+        } else if (getDisplayName(child.type) === 'Switcher') {
+          return React.cloneElement(child as React.ReactElement<any>, {
+            handleSwitcherItemFocus,
+            index,
+            key: index,
+            expanded,
+          });
+        } else {
+          return React.cloneElement(child as React.ReactElement<any>, {
+            index,
+            key: index,
+            expanded,
+          });
+        }
       }
-
-      return React.cloneElement(child as React.ReactElement<any>, {
-        index,
-        key: index,
-        expanded,
-      });
+      return child;
     }
   );
-
   return (
     <ul
       ref={ref as React.RefObject<HTMLUListElement>}

packages/react/src/components/UIShell/UIShell.HeaderBase.stories.js

@@ -570,26 +570,28 @@ export const HeaderWActionsAndSwitcher = (args) => (
             <Switcher
               aria-label="Switcher Container"
               expanded={isSideNavExpanded}>
-              <SwitcherItem aria-label="Link 1" href="#">
-                Link 1
-              </SwitcherItem>
-              <SwitcherDivider />
-              <SwitcherItem href="#" aria-label="Link 2">
-                Link 2
-              </SwitcherItem>
-              <SwitcherItem href="#" aria-label="Link 3">
-                Link 3
-              </SwitcherItem>
-              <SwitcherItem href="#" aria-label="Link 4">
-                Link 4
-              </SwitcherItem>
-              <SwitcherItem href="#" aria-label="Link 5">
-                Link 5
-              </SwitcherItem>
-              <SwitcherDivider />
-              <SwitcherItem href="#" aria-label="Link 6">
-                Link 6
-              </SwitcherItem>
+              <>
+                <SwitcherItem aria-label="Link 1" href="#">
+                  Link 1
+                </SwitcherItem>
+                <SwitcherDivider />
+                <SwitcherItem href="#" aria-label="Link 2">
+                  Link 2
+                </SwitcherItem>
+                <SwitcherItem href="#" aria-label="Link 3">
+                  Link 3
+                </SwitcherItem>
+                <SwitcherItem href="#" aria-label="Link 4">
+                  Link 4
+                </SwitcherItem>
+                <SwitcherItem href="#" aria-label="Link 5">
+                  Link 5
+                </SwitcherItem>
+                <SwitcherDivider />
+                <SwitcherItem href="#" aria-label="Link 6">
+                  Link 6
+                </SwitcherItem>
+              </>
             </Switcher>
           </HeaderPanel>
         </Header>