From 42aa5b776b320694a0073d4ba225986fd3858822 Mon Sep 17 00:00:00 2001
From: theojungle <mesniltheo@gmail.com>
Date: Tue, 8 Aug 2023 11:12:19 +0200
Subject: [PATCH] fix: store to modal children

---
 docs/components/ThemeHelper.js      |  2 +-
 docs/pages/components/modal.mdx     | 10 +++++-----
 packages/Modal/src/Content.tsx      |  6 +++---
 packages/Modal/src/index.tsx        | 12 ++++++++++--
 packages/Modal/tests/index.test.tsx |  2 +-
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/docs/components/ThemeHelper.js b/docs/components/ThemeHelper.js
index 186de56da0..f5aeb6e524 100644
--- a/docs/components/ThemeHelper.js
+++ b/docs/components/ThemeHelper.js
@@ -37,7 +37,7 @@ export const ThemeHelper = ({ modalStore }) => {
   return (
     <>
       <Modal ariaLabel="theme configuration" store={modalStore} title={title}>
-        <Modal.Content store={modalStore}>
+        <Modal.Content>
           <Modal.Header subtitle="Documentation for the core theme entries" title={title} />
           <Modal.Body mt="xl">
             <Box display="flex">
diff --git a/docs/pages/components/modal.mdx b/docs/pages/components/modal.mdx
index 759cdc0cfa..ea44160489 100644
--- a/docs/pages/components/modal.mdx
+++ b/docs/pages/components/modal.mdx
@@ -33,7 +33,7 @@ function() {
         Open modal
       </Modal.Trigger>
       <Modal store={modal} ariaLabel="example">
-        <Modal.Content store={modal}>
+        <Modal.Content>
           <Modal.Body>
             Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
           aliquam nec, convallis sit amet erat. Mauris auctor blandit porta. In imperdiet rutrum
@@ -79,7 +79,7 @@ function() {
         auto
       </Modal.Trigger>
       <Modal store={modal} size={size} ariaLabel="size example">
-        <Modal.Content store={modal}>
+        <Modal.Content>
           <Modal.Body>
           Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
           aliquam nec, convallis sit amet erat. Mauris auctor blandit porta. In imperdiet rutrum
@@ -122,7 +122,7 @@ function() {
         Example modal
       </Modal.Trigger>
       <Modal store={modal} ariaLabel="example">
-        <Modal.Content store={modal}>
+        <Modal.Content>
           <Modal.Header title={title} subtitle={subtitle} icon={icon}/>
           <Modal.Body>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium leo orci, sed
@@ -273,7 +273,7 @@ function() {
         Example modal 2
       </Modal.Trigger>
       <Modal store={modal2} ariaLabel="example-2">
-        <Modal.Content store={modal}>
+        <Modal.Content>
           <Modal.Header title={title} subtitle={subtitle} />
           <Modal.Body>
             Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
@@ -309,7 +309,7 @@ function() {
         Example modal 3
       </Modal.Trigger>
       <Modal store={modal3} ariaLabel="example-3">
-        <Modal.Content store={modal}>
+        <Modal.Content>
           <Modal.Header title={title} icon={icon} />
           <Modal.Body>
             Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
diff --git a/packages/Modal/src/Content.tsx b/packages/Modal/src/Content.tsx
index 07414d4571..b920511d29 100644
--- a/packages/Modal/src/Content.tsx
+++ b/packages/Modal/src/Content.tsx
@@ -12,7 +12,7 @@ export interface ContentOptions {
 }
 
 export type ContentProps = ContentOptions & {
-  store: UseModal
+  store?: UseModal
 }
 
 /**
@@ -21,8 +21,8 @@ export type ContentProps = ContentOptions & {
 export const Content = forwardRef<'div', ContentProps>(({ children, store, ...rest }, ref) => {
   const { borderWidths, space } = useTheme()
   const [borderOnFooter, setBorderOnFooter] = useState(false)
-  const contentElement = store.useState('contentElement')
-  const open = store.useState('open')
+  const contentElement = store?.useState('contentElement')
+  const open = store?.useState('open')
 
   const components = useMemo(
     () =>
diff --git a/packages/Modal/src/index.tsx b/packages/Modal/src/index.tsx
index 31a1e27a45..8f38f8d18f 100644
--- a/packages/Modal/src/index.tsx
+++ b/packages/Modal/src/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Children, cloneElement } from 'react'
 import * as Ariakit from '@ariakit/react'
 import { BoxProps } from '@welcome-ui/box'
 import { As, CreateWuiProps, forwardRef } from '@welcome-ui/system'
@@ -57,7 +57,15 @@ const ModalComponent = forwardRef<'div', ModalProps>(
         size={size}
         store={store}
       >
-        {children}
+        {/* we need to pass store on child */}
+        {Children.map(children, (child: JSX.Element) => {
+          if (!child) return null
+
+          return cloneElement(child, {
+            ...child.props,
+            store,
+          })
+        })}
       </S.Dialog>
     )
   }
diff --git a/packages/Modal/tests/index.test.tsx b/packages/Modal/tests/index.test.tsx
index 649cef06be..13b3395c4b 100644
--- a/packages/Modal/tests/index.test.tsx
+++ b/packages/Modal/tests/index.test.tsx
@@ -36,7 +36,7 @@ describe('<Modal>', () => {
             open
           </Modal.Trigger>
           <Modal ariaLabel="modal" store={modal}>
-            <Modal.Content store={modal}>
+            <Modal.Content>
               {shouldRender && <Modal.Body>Modal.Body exist?</Modal.Body>}
             </Modal.Content>
           </Modal>