fix: react macro types (#1620)

packages/macro/index.d.ts

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import type { ReactElement, ReactNode, VFC, FC } from "react"
+import type { ReactNode, VFC, FC } from "react"
 import type { I18n, MessageDescriptor } from "@lingui/core"
-import type { TransRenderProps } from "@lingui/react"
+import type { TransRenderCallbackOrComponent } from "@lingui/react"
 
 export type ChoiceOptions = {
   /** Offset of value when calculating plural forms */
@@ -216,12 +216,10 @@ export function defineMessage(
  */
 export const msg: typeof defineMessage
 
-type CommonProps = {
+type CommonProps = TransRenderCallbackOrComponent & {
   id?: string
   comment?: string
   context?: string
-  render?: (props: TransRenderProps) => ReactElement<any, any> | null
-  i18n?: I18n
 }
 
 type TransProps = {

packages/react/src/Trans.tsx

@@ -10,9 +10,16 @@ export type TransRenderProps = {
   message?: string | null
   isTranslated: boolean
 }
-type MaximumOneOf<T, K extends keyof T = keyof T> = K extends keyof T
-  ? { [P in K]?: T[K] } & Partial<Record<Exclude<keyof T, K>, never>>
-  : never
+
+export type TransRenderCallbackOrComponent =
+  | {
+      component?: undefined
+      render?: (props: TransRenderProps) => React.ReactElement<any, any> | null
+    }
+  | {
+      component?: React.ComponentType<TransRenderProps>
+      render?: undefined
+    }
 
 export type TransProps = {
   id: string
@@ -21,17 +28,14 @@ export type TransProps = {
   components?: { [key: string]: React.ElementType | any }
   formats?: Record<string, unknown>
   children?: React.ReactNode
-} & MaximumOneOf<{
-  component?: React.ComponentType<TransRenderProps>
-  render?: (props: TransRenderProps) => React.ReactElement<any, any> | null
-}>
+} & TransRenderCallbackOrComponent
 
 export function Trans(props: TransProps): React.ReactElement<any, any> | null {
   const { i18n, defaultComponent } = useLingui()
   const { render, component, id, message, formats } = props
 
-  const values = { ...(props.values || {}) }
-  const components = { ...(props.components || {}) }
+  const values = { ...props.values }
+  const components = { ...props.components }
 
   if (values) {
     /*

packages/react/src/index.ts

@@ -3,4 +3,8 @@ export { I18nProvider, useLingui, LinguiContext } from "./I18nProvider"
 export type { I18nProviderProps, I18nContext } from "./I18nProvider"
 
 export { Trans } from "./Trans"
-export type { TransProps, TransRenderProps } from "./Trans"
+export type {
+  TransProps,
+  TransRenderProps,
+  TransRenderCallbackOrComponent,
+} from "./Trans"