From 5c27b724c62282da77269fd2a6749979da2d0e31 Mon Sep 17 00:00:00 2001
From: Diane Guillot <36013102+Leiksa@users.noreply.github.com>
Date: Thu, 5 Jan 2023 17:36:16 +0100
Subject: [PATCH] fix: allow modal to be wrapped in a React.Fragment (#1826)

---
 packages/Modal/index.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/Modal/index.tsx b/packages/Modal/index.tsx
index 54355681da..8707ed7a05 100644
--- a/packages/Modal/index.tsx
+++ b/packages/Modal/index.tsx
@@ -63,7 +63,16 @@ const ModalComponent = forwardRef<'div', ModalProps>(
     const contentScrollHeight = contentRef?.current?.scrollHeight
 
     const components = useMemo(
-      () => Children.map(children, child => child?.type?.displayName || child?.type?.name),
+      () =>
+        Children.map(children, child => {
+          if (child.type === React.Fragment) {
+            return Children.map(
+              child.props.children,
+              _child => _child?.type?.displayName ?? _child?.type?.name
+            )
+          }
+          return child?.type?.displayName ?? child?.type?.name
+        }),
       [children]
     )
 
@@ -129,6 +138,18 @@ const ModalComponent = forwardRef<'div', ModalProps>(
           <CloseElement onClick={closeModal} />
           {Children.map(children, (child: JSX.Element) => {
             if (!child) return null
+            if (child.type === React.Fragment) {
+              return Children.map(child.props.children, _child => {
+                const name = _child?.type?.displayName || _child?.type?.name
+
+                return cloneElement(_child, {
+                  ref: setRef(name),
+                  ...getStyles(name),
+                  ..._child.props,
+                })
+              })
+            }
+
             const name = child?.type?.displayName || child?.type?.name
 
             return cloneElement(child, {