From 72c80b3ea043244a6bf8a9b4e044ecbf8476ff5c Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
Date: Thu, 19 Sep 2024 16:30:53 +0530
Subject: [PATCH] fix(16916): adds React fragment support for Switcher's direct
 child (#17008)

* fix(15337): fix release names in update automation

* fix(15337): fix release names in update automation

* fix(16916): added React fragment support for Switcher child

* docs: revert changes & adds usage docs for Switcher

* Format fix

* Update UsingFragmentsWithSwitcher.md

* chore: format fix

---------

Co-authored-by: Preeti Bansal <146315451+preetibansalui@users.noreply.github.com>
---
 .../react/docs/UsingFragmentsWithSwitcher.md  | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 packages/react/docs/UsingFragmentsWithSwitcher.md

diff --git a/packages/react/docs/UsingFragmentsWithSwitcher.md b/packages/react/docs/UsingFragmentsWithSwitcher.md
new file mode 100644
index 000000000000..e4aaacf0878b
--- /dev/null
+++ b/packages/react/docs/UsingFragmentsWithSwitcher.md
@@ -0,0 +1,43 @@
+The `Switcher` component is designed to have `SwitcherItem` components as its
+direct children. However, there may be cases where you want to use React
+Fragments or other nested structures within the `Switcher`. To accommodate we
+recommend using the [`react-keyed-flatten-children`]
+(https://www.npmjs.com/package/react-keyed-flatten-children#react-keyed-flatten-children)
+package.
+
+### Using react-keyed-flatten-children
+
+The `react-keyed-flatten-children` package allows you to flatten arrays and
+React Fragments into a regular, one-dimensional array while preserving element
+and fragment keys.
+
+1. Install the package:
+
+   ```
+   npm install react-keyed-flatten-children
+   ```
+
+2. Import and use in your component:
+
+   ```jsx
+   import flattenChildren from 'react-keyed-flatten-children';
+
+   const YourComponent = () => (
+     <Switcher>
+       {flattenChildren(
+         <>
+           <SwitcherItem>Item 1</SwitcherItem>
+           <SwitcherItem>Item 2</SwitcherItem>
+           <>
+             <SwitcherItem>Item 3</SwitcherItem>
+             <SwitcherItem>Item 4</SwitcherItem>
+           </>
+         </>
+       )}
+     </Switcher>
+   );
+   ```
+
+This approach allows you to use Fragments and nested structures with components
+like `<Switcher>` without modifying their source code. It preserves keys and
+props, ensuring stable rendering across updates.