From 3fb7613112d04c1ff13e944a5a3c7f54e6b958cf Mon Sep 17 00:00:00 2001
From: Jay Meistrich <jmeistrich@gmail.com>
Date: Sun, 26 Jan 2025 16:44:51 +0800
Subject: [PATCH] Improve typing of Show wrap prop to have children, add a test
 that a custom component with props could be used

---
 src/react/Show.tsx   |  2 +-
 tests/react.test.tsx | 30 ++++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/react/Show.tsx b/src/react/Show.tsx
index 99067747..aa8a7a55 100644
--- a/src/react/Show.tsx
+++ b/src/react/Show.tsx
@@ -15,7 +15,7 @@ interface PropsIfReady<T> {
 interface PropsBase<T> {
     else?: ReactNode | (() => ReactNode);
     $value?: Observable<T>;
-    wrap?: FC;
+    wrap?: FC<{ children: ReactNode }>;
     children: ReactNode | ((value?: T) => ReactNode);
 }
 
diff --git a/tests/react.test.tsx b/tests/react.test.tsx
index d554f024..68fc14b3 100644
--- a/tests/react.test.tsx
+++ b/tests/react.test.tsx
@@ -936,6 +936,36 @@ describe('Show', () => {
 
         expect(numRenders).toEqual(2);
     });
+    test('Show wrap with wrapProps', async () => {
+        const obs = observable({
+            ok: false,
+        });
+        let testValue;
+        const Wrap = (props: { test: string; children?: any }) => {
+            testValue = props.test;
+            return props.children;
+        };
+        function Test() {
+            return (
+                <Show if={obs.ok} wrap={(props: { children: any }) => <Wrap test="tester" {...props} />}>
+                    <span>hi</span>
+                </Show>
+            );
+        }
+        const { container } = render(createElement(Test));
+
+        let items = container.querySelectorAll('span');
+        expect(items.length).toEqual(0);
+
+        act(() => {
+            obs.ok.set(true);
+        });
+
+        items = container.querySelectorAll('span');
+        expect(items.length).toEqual(1);
+        expect(items[0].textContent).toEqual('hi');
+        expect(testValue).toEqual('tester');
+    });
 });
 
 describe('Switch', () => {