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

[2nikhiltom]

Closes #16916

This PR fix an issue where the Switcher component crashes when a React Fragment is used as a direct child.
It's fix involves modifying the child handling logic to properly handle the Fragment case

@2nikhiltom Nice, I see this outlined in the package docs. This makes the most sense to me. So instead of making these changes to Switcher, could this PR be updated to document using react-keyed-flatten-children? Maybe in a new document named /packages/react/docs/composition.md?

After discussions, we concluded to have this PR to update the usage doc UsingFragmentsWithSwitcher.md

Changelog

New

Added flattening logic for children, including those within Fragments
Introduced unique index and key generation for Fragment children

Added a new .md file which suggest the usage of react-keyed-flatten-children

Changed

Testing / Reviewing

1. Verify that when Switcher component is passed with React Fragments as direct children, application does not crash
2. Verify focus navigation | keyboard navigation works like before
3. Verify that the existing functionality is intact

Read and verify the .md files makes sence and that I did not miss anything

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	957ba1f
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/66e31c308d4a6e00088e039e
😎 Deploy Preview	https://deploy-preview-17008--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	957ba1f
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/66e31c30e36e9500084892c3
😎 Deploy Preview	https://deploy-preview-17008--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[riddhybansal]

Nice fix!!

[preetibansalui]

LGTM

[tay1orjones]

This is an interesting problem. I'm curious about a few things:

• Will this work with multiple levels of nesting?
• Does it preserve keys and props placed on nested and non-nested children and fragments?

More conceptually:

• Do you think our components should support this use case? The intent today is for Switcher to have direct children of SwitcherItem - that's it. No nested children, fragments, etc.
• Is there a way for a consumer to work around this on their own without having to modify the source of our components?

[tay1orjones]

Did you look at https://github.com/grrowl/react-keyed-flatten-children? It only has a single dependency on react-is. We could use it in our components, but it also looks like consumers can use it on their own to use fragments if they'd like. It's referred to on the react thread regarding Children.toArray not traversing fragments. Thoughts?

[2nikhiltom]

Hey @tay1orjones ,
react-keyed-flatten-children makes sure that it flatten arrays and React.Fragments into a regular, one-dimensional array while ensuring element and fragment keys are preserved, unique, and stable between renders.

The current implementation works fairly fine for single level of nesting, preserving keys and props placed on nested and non-nested children and fragments becomes messy incase of multilevel nesting which is exactly solved by above utility.

The currently purpose of Switcher is to provides a way for the user to easily navigate between products and systems and expects a SwitcherItem as its direct child as SwitcherItem is expected to have a link/href to redirect somewhere when clicked
Instead of modifying the Switcher component to accommodate this, it makes more sense for consumers to use the react-keyed-flatten-children package to manage their use cases. This will keeps dependencies light and the component source clean.

[tay1orjones]

Instead of modifying the Switcher component to accommodate this, it makes more sense for consumers to use the react-keyed-flatten-children package to manage their use cases. This will keeps dependencies light and the component source clean.

@2nikhiltom Nice, I see this outlined in the package docs. This makes the most sense to me. So instead of making these changes to Switcher, could this PR be updated to document using react-keyed-flatten-children? Maybe in a new document named /packages/react/docs/composition.md?

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 76.82%. Comparing base (fdb31d9) to head (957ba1f).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #17008   +/-   ##
=======================================
  Coverage   76.82%   76.82%           
=======================================
  Files         408      408           
  Lines       13973    13973           
  Branches     4341     4337    -4     
=======================================
  Hits        10735    10735           
  Misses       3064     3064           
  Partials      174      174           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.