[publish] fix breadcrumbs work with React.Fragment containers as a tr…

…ansparent containers reactjs/rfcs#61
JetBrains · Sep 16, 2024 · fc6507f · fc6507f
1 parent 64817e7
commit fc6507f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -232,6 +232,7 @@
     "postcss-loader": "^8.1.1",
     "postcss-modules-values-replace": "^4.2.0",
     "postcss-preset-env": "^10.0.3",
+    "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
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import {Children, Fragment, ReactNode} from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+import {Fragment, ReactNode} from 'react';
 
 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>}