From 704bb21b7c13a8d47bbda622e6cbb1506b25db02 Mon Sep 17 00:00:00 2001
From: "maksim.erekhinskii" <maxim.erehinskiy@jetbrains.com>
Date: Mon, 16 Sep 2024 20:23:32 +0200
Subject: [PATCH] [publish] fix breadcrumbs work with React.Fragment containers
 as a transparent containers

https://github.com/reactjs/rfcs/pull/61
---
 package-lock.json               | 34 +++++++++++++++++++++++++++++++++
 package.json                    |  1 +
 src/breadcrumbs/breadcrumbs.tsx |  5 +++--
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 10883eb067d..55b8fa03f5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,6 +51,7 @@
         "postcss-modules-values-replace": "^4.2.0",
         "postcss-preset-env": "^9.6.0",
         "prop-types": "^15.8.1",
+        "react-keyed-flatten-children": "^3.0.2",
         "react-movable": "^3.3.1",
         "react-virtualized": "^9.22.5",
         "react-waypoint": "^10.3.0",
@@ -29650,6 +29651,24 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-keyed-flatten-children": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-keyed-flatten-children/-/react-keyed-flatten-children-3.0.2.tgz",
+      "integrity": "sha512-5oiw2x9QlCSOTeAerw72e3ij0P+kJ60A7mtHvpabbOc4j3mvVQB3YpXCy2Qt/0YOuDWvAq3w/cGRuO7G20KISQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-is": "^18.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
+    "node_modules/react-keyed-flatten-children/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -59077,6 +59096,21 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-keyed-flatten-children": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-keyed-flatten-children/-/react-keyed-flatten-children-3.0.2.tgz",
+      "integrity": "sha512-5oiw2x9QlCSOTeAerw72e3ij0P+kJ60A7mtHvpabbOc4j3mvVQB3YpXCy2Qt/0YOuDWvAq3w/cGRuO7G20KISQ==",
+      "requires": {
+        "react-is": "^18.2.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.3.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+          "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+        }
+      }
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
diff --git a/package.json b/package.json
index f3688da9e99..fe66e171ca6 100644
--- a/package.json
+++ b/package.json
@@ -234,6 +234,7 @@
     "postcss-modules-values-replace": "^4.2.0",
     "postcss-preset-env": "^9.6.0",
     "prop-types": "^15.8.1",
+    "react-keyed-flatten-children": "^3.0.2",
     "react-movable": "^3.3.1",
     "react-virtualized": "^9.22.5",
     "react-waypoint": "^10.3.0",
diff --git a/src/breadcrumbs/breadcrumbs.tsx b/src/breadcrumbs/breadcrumbs.tsx
index 9760b6d651e..695b1e1a0ec 100644
--- a/src/breadcrumbs/breadcrumbs.tsx
+++ b/src/breadcrumbs/breadcrumbs.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import {Children, Fragment, ReactNode} from 'react';
+import {Fragment, ReactNode} from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
 
 import styles from './breadcrumbs.css';
 
@@ -9,7 +10,7 @@ export interface BreadcrumbsSeparatorAttrs {
 }
 
 export default function Breadcrumbs({separatorClassName, children}: BreadcrumbsSeparatorAttrs) {
-  return Children.toArray(children).map((child, index) => (
+  return flattenChildren(children).map((child, index) => (
     // eslint-disable-next-line react/no-array-index-key
     <Fragment key={index}>
       {index > 0 && <span className={classNames(styles.separator, separatorClassName)}>{'/'}</span>}