From ca86c59ff9a5ad238981c87b6e90143b4ed85dd1 Mon Sep 17 00:00:00 2001
From: Michael Best <mibes@microsoft.com>
Date: Tue, 26 Aug 2025 15:09:30 -0700
Subject: [PATCH] Rearrange observer type definitions to allow wrapping custom
 HOC

---
 .../__tests__/observer.test.tsx               | 27 +++++++++++++++++++
 packages/mobx-react-lite/src/observer.ts      | 11 ++++----
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/mobx-react-lite/__tests__/observer.test.tsx b/packages/mobx-react-lite/__tests__/observer.test.tsx
index f4f0a92b3..aeb82040a 100644
--- a/packages/mobx-react-lite/__tests__/observer.test.tsx
+++ b/packages/mobx-react-lite/__tests__/observer.test.tsx
@@ -594,6 +594,33 @@ test("useImperativeHandle and forwardRef should work with useObserver", () => {
     expect(consoleWarnMock).toMatchSnapshot()
 })
 
+test("observer should work with custom HOC and infer correct type", () => {
+    const validateChildrenWrapper = <T extends {}>(component: React.FC<T>): React.FC<T> => {
+        const wrapper: React.FC<T> = (...args) => {
+            const result = component(...args)
+            if (result && React.isValidElement(result) && result.type === "div") {
+                return result
+            }
+            throw new Error("Only <div> allowed as root element")
+        }
+        wrapper.displayName = component.displayName || component.name
+        return wrapper
+    }
+
+    interface IProps {
+        value: string
+    }
+
+    const TestComponent: React.FC<IProps> = observer(
+        validateChildrenWrapper(function TestComponent({ value }) {
+            return <div>{value}</div>
+        })
+    )
+
+    const rendered = render(<TestComponent value="1" />)
+    expect(rendered.container.querySelector("div")!.innerHTML).toBe("1")
+})
+
 it("should hoist known statics only", () => {
     function isNumber() {
         return null
diff --git a/packages/mobx-react-lite/src/observer.ts b/packages/mobx-react-lite/src/observer.ts
index 2f4a79928..6d9948d63 100644
--- a/packages/mobx-react-lite/src/observer.ts
+++ b/packages/mobx-react-lite/src/observer.ts
@@ -44,6 +44,11 @@ export function observer<P extends object, TRef = {}>(
     React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<TRef>>
 >
 
+export function observer<P extends object>(
+    baseComponent: React.FunctionComponent<P>,
+    options?: IObserverOptions
+): React.FunctionComponent<P>
+
 export function observer<P extends object, TRef = {}>(
     baseComponent: React.ForwardRefExoticComponent<
         React.PropsWithoutRef<P> & React.RefAttributes<TRef>
@@ -51,12 +56,6 @@ export function observer<P extends object, TRef = {}>(
 ): React.MemoExoticComponent<
     React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<TRef>>
 >
-
-export function observer<P extends object>(
-    baseComponent: React.FunctionComponent<P>,
-    options?: IObserverOptions
-): React.FunctionComponent<P>
-
 export function observer<
     C extends React.FunctionComponent<any> | React.ForwardRefRenderFunction<any>,
     Options extends IObserverOptions