From 3b9c3570fded26ff6bbf5d99eb72b20674fb75a9 Mon Sep 17 00:00:00 2001
From: Espen Hovlandsdal <espen@hovlandsdal.com>
Date: Wed, 27 Sep 2023 17:56:32 +0100
Subject: [PATCH] refactor(i18n): make `components` prop required for
 <Translate>

Rationale: We prefer that people use the `useTranslation` hook instead,
as it has a lower overhead. The only two use cases we're tailoring for
is when you need to use React components as part of the translation resource,
or you are using a non-functional component and thus cannot use hooks.
---
 packages/sanity/src/core/i18n/Translate.tsx                | 2 +-
 packages/sanity/src/core/i18n/__tests__/Translate.test.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sanity/src/core/i18n/Translate.tsx b/packages/sanity/src/core/i18n/Translate.tsx
index fb849ebc84b0..ffe6041d9330 100644
--- a/packages/sanity/src/core/i18n/Translate.tsx
+++ b/packages/sanity/src/core/i18n/Translate.tsx
@@ -10,7 +10,7 @@ type ComponentMap = Record<string, ComponentType<{children?: ReactNode}>>
 export interface TranslationProps {
   t: TFunction
   i18nKey: string
-  components?: ComponentMap
+  components: ComponentMap
   values?: Record<string, string | string[]>
 }
 
diff --git a/packages/sanity/src/core/i18n/__tests__/Translate.test.tsx b/packages/sanity/src/core/i18n/__tests__/Translate.test.tsx
index 9a0ec198fd56..aa77e607219b 100644
--- a/packages/sanity/src/core/i18n/__tests__/Translate.test.tsx
+++ b/packages/sanity/src/core/i18n/__tests__/Translate.test.tsx
@@ -59,7 +59,7 @@ describe('Translate component', () => {
   it('it translates a key', async () => {
     const {findByTestId} = render(
       <TestProviders bundles={[createBundle({title: 'English title'})]}>
-        <TestComponent i18nKey="title" />
+        <TestComponent i18nKey="title" components={{}} />
       </TestProviders>,
     )
     expect((await findByTestId('output')).innerHTML).toEqual('English title')
@@ -67,7 +67,7 @@ describe('Translate component', () => {
   it('it renders the key as-is if translation is missing', async () => {
     const {findByTestId} = render(
       <TestProviders bundles={[createBundle({title: 'English title'})]}>
-        <TestComponent i18nKey="does-not-exist" />
+        <TestComponent i18nKey="does-not-exist" components={{}} />
       </TestProviders>,
     )
     expect((await findByTestId('output')).innerHTML).toEqual('does-not-exist')