refactor(context): add React.FC type in Provider (#3080)

.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"

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;
   }