@navikt/ds-react 6.16.3 → 7.0.0

package/src/util/i18n/i18n.context.test.tsx

@@ -1,7 +1,8 @@
 import { renderHook } from "@testing-library/react";
 import React from "react";
 import { describe, expect, test } from "vitest";
-import { I18nContext, useI18n } from "./i18n.context";
+import UNSAFE_AkselLanguageProvider from "../../provider/i18n/LanguageProvider";
+import { useI18n } from "./i18n.context";
 
 describe("useI18n", () => {
   test("should throw error if key is not found", () => {
@@ -15,7 +16,9 @@ describe("useI18n", () => {
     const i18n = { FileUpload: { item: { uploading: "Test translation" } } };
     const { result } = renderHook(() => useI18n("FileUpload"), {
       wrapper: ({ children }) => (
-        <I18nContext.Provider value={i18n}>{children}</I18nContext.Provider>
+        <UNSAFE_AkselLanguageProvider translations={i18n}>
+          {children}
+        </UNSAFE_AkselLanguageProvider>
       ),
     });
     const translate = result.current;
@@ -29,9 +32,9 @@ describe("useI18n", () => {
     const i18n2 = { FileUpload: { item: { uploading: "Wrong translation" } } };
     const { result } = renderHook(() => useI18n("FileUpload"), {
       wrapper: ({ children }) => (
-        <I18nContext.Provider value={[i18n1, i18n2]}>
+        <UNSAFE_AkselLanguageProvider translations={[i18n1, i18n2]}>
           {children}
-        </I18nContext.Provider>
+        </UNSAFE_AkselLanguageProvider>
       ),
     });
     const translate = result.current;
@@ -45,9 +48,9 @@ describe("useI18n", () => {
     };
     const { result } = renderHook(() => useI18n("FileUpload"), {
       wrapper: ({ children }) => (
-        <I18nContext.Provider value={[i18n1, i18n2]}>
+        <UNSAFE_AkselLanguageProvider translations={[i18n1, i18n2]}>
           {children}
-        </I18nContext.Provider>
+        </UNSAFE_AkselLanguageProvider>
       ),
     });
     const translate = result.current;

package/src/util/i18n/i18n.context.ts

@@ -1,10 +1,7 @@
-import { createContext, useContext } from "react";
+import { useContext } from "react";
+import { LanguageProviderContext } from "../../provider/i18n/LanguageProvider";
 import { get } from "./get";
-import {
-  Component,
-  ComponentTranslation,
-  TranslationDictionary,
-} from "./i18n.types";
+import { Component, ComponentTranslation } from "./i18n.types";
 import nb from "./locales/nb";
 
 /**
@@ -12,10 +9,6 @@ import nb from "./locales/nb";
  */
 const REPLACE_REGEX = /{[^}]*}/g;
 
-export const I18nContext = createContext<
-  TranslationDictionary | TranslationDictionary[]
->(nb);
-
 /* https://dev.to/pffigueiredo/typescript-utility-keyof-nested-object-2pa3 */
 type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
@@ -27,7 +20,8 @@ export function useI18n<T extends Component>(
   componentName: T,
   ...local: (ComponentTranslation<T> | undefined)[]
 ) {
-  const i18n = useContext(I18nContext);
+  const languageProviderContext = useContext(LanguageProviderContext);
+  const i18n = languageProviderContext.translations;
 
   /**
    * https://github.com/Shopify/polaris/blob/2115f9ba2f5bcbf2ad15745233501bff2db81ecf/polaris-react/src/utilities/i18n/I18n.ts#L24