From ae51e9dd20ee933efbe0511f54a01f13fec6aad1 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Fri, 27 Sep 2024 09:19:22 +0900
Subject: [PATCH] refactor(context): add React.FC type in Provider (#3080)

---
 .yarn/versions/c80771b8.yml                  | 33 ++++++++++++++++++++
 packages/react/context/src/createContext.tsx | 18 ++++++-----
 2 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 .yarn/versions/c80771b8.yml

diff --git a/.yarn/versions/c80771b8.yml b/.yarn/versions/c80771b8.yml
new file mode 100644
index 000000000..8216d98bb
--- /dev/null
+++ b/.yarn/versions/c80771b8.yml
@@ -0,0 +1,33 @@
+releases:
+  "@radix-ui/react-context": patch
+
+declined:
+  - primitives
+  - "@radix-ui/react-accordion"
+  - "@radix-ui/react-alert-dialog"
+  - "@radix-ui/react-avatar"
+  - "@radix-ui/react-checkbox"
+  - "@radix-ui/react-collapsible"
+  - "@radix-ui/react-collection"
+  - "@radix-ui/react-context-menu"
+  - "@radix-ui/react-dialog"
+  - "@radix-ui/react-dropdown-menu"
+  - "@radix-ui/react-form"
+  - "@radix-ui/react-hover-card"
+  - "@radix-ui/react-menu"
+  - "@radix-ui/react-menubar"
+  - "@radix-ui/react-navigation-menu"
+  - "@radix-ui/react-popover"
+  - "@radix-ui/react-popper"
+  - "@radix-ui/react-progress"
+  - "@radix-ui/react-radio-group"
+  - "@radix-ui/react-roving-focus"
+  - "@radix-ui/react-scroll-area"
+  - "@radix-ui/react-select"
+  - "@radix-ui/react-slider"
+  - "@radix-ui/react-switch"
+  - "@radix-ui/react-tabs"
+  - "@radix-ui/react-toast"
+  - "@radix-ui/react-toggle-group"
+  - "@radix-ui/react-toolbar"
+  - "@radix-ui/react-tooltip"
diff --git a/packages/react/context/src/createContext.tsx b/packages/react/context/src/createContext.tsx
index e3ca734f7..894f298eb 100644
--- a/packages/react/context/src/createContext.tsx
+++ b/packages/react/context/src/createContext.tsx
@@ -6,13 +6,15 @@ function createContext<ContextValueType extends object | null>(
 ) {
   const Context = React.createContext<ContextValueType | undefined>(defaultContext);
 
-  function Provider(props: ContextValueType & { children: React.ReactNode }) {
+  const Provider: React.FC<ContextValueType & { children: React.ReactNode }> = (props) => {
     const { children, ...context } = props;
     // Only re-memoize when prop values change
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;
     return <Context.Provider value={value}>{children}</Context.Provider>;
-  }
+  };
+
+  Provider.displayName = rootComponentName + 'Provider';
 
   function useContext(consumerName: string) {
     const context = React.useContext(Context);
@@ -22,7 +24,6 @@ function createContext<ContextValueType extends object | null>(
     throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
   }
 
-  Provider.displayName = rootComponentName + 'Provider';
   return [Provider, useContext] as const;
 }
 
@@ -52,16 +53,18 @@ function createContextScope(scopeName: string, createContextScopeDeps: CreateSco
     const index = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
 
-    function Provider(
-      props: ContextValueType & { scope: Scope<ContextValueType>; children: React.ReactNode }
-    ) {
+    const Provider: React.FC<
+      ContextValueType & { scope: Scope<ContextValueType>; children: React.ReactNode }
+    > = (props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName][index] || BaseContext;
       // Only re-memoize when prop values change
       // eslint-disable-next-line react-hooks/exhaustive-deps
       const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;
       return <Context.Provider value={value}>{children}</Context.Provider>;
-    }
+    };
+
+    Provider.displayName = rootComponentName + 'Provider';
 
     function useContext(consumerName: string, scope: Scope<ContextValueType | undefined>) {
       const Context = scope?.[scopeName][index] || BaseContext;
@@ -72,7 +75,6 @@ function createContextScope(scopeName: string, createContextScopeDeps: CreateSco
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
     }
 
-    Provider.displayName = rootComponentName + 'Provider';
     return [Provider, useContext] as const;
   }