@navikt/ds-react 7.9.0 → 7.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.9.0",
+  "version": "7.9.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -603,10 +603,11 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "docgen": "yarn tsx ../../../scripts/docgen.ts",
+    "docgen": "tsx ../../../scripts/docgen.ts",
+    "i18n-jsdoc": "tsx ./scripts/addJsdocToLocales.ts",
     "write-packagejson": "echo '{\"type\": \"module\"}' > esm/package.json",
     "clean": "rimraf cjs esm",
-    "build": "concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" ",
+    "build": "yarn i18n-jsdoc && concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && yarn i18n-jsdoc --cleanup",
     "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "TZ=UTC vitest run -c tests/vitest.config.ts",
     "test:watch": "vitest watch"
@@ -614,20 +615,23 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.9.0",
-    "@navikt/ds-tokens": "^7.9.0",
+    "@navikt/aksel-icons": "^7.9.1",
+    "@navikt/ds-tokens": "^7.9.1",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.1"
   },
   "devDependencies": {
-    "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "^5.16.0",
-    "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.2.0",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jscodeshift": "^0.11.11",
+    "aksel": "workspace:^",
     "concurrently": "9.0.1",
     "fast-glob": "3.2.11",
-    "jsdom": "24.0.0",
+    "jscodeshift": "^0.15.1",
+    "jsdom": "25.0.1",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
     "rimraf": "6.0.1",
@@ -635,7 +639,7 @@
     "tsc-alias": "1.8.8",
     "tsx": "^4.19.1",
     "typescript": "5.5.4",
-    "vitest": "^1.2.2"
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "@types/react": ">=17.0.30",
@@ -645,5 +649,6 @@
     "@types/react": {
       "optional": true
     }
-  }
+  },
+  "_comment": "The 'aksel' dependency tells yarn to install the root deps when installing deps for this package. Helps make it possible to contribute without access to GPR."
 }

package/src/alert/Alert.tsx

@@ -9,7 +9,7 @@ import {
 } from "@navikt/aksel-icons";
 import { Button } from "../button";
 import { BodyLong } from "../typography";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**

package/src/chips/Removable.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { composeEventHandlers } from "../util/composeEventHandlers";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export interface ChipsRemovableProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/src/copybutton/CopyButton.tsx

@@ -10,7 +10,7 @@ import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import { Label } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import copy from "../util/copy";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {

package/src/date/context/useDateTranslationContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from "../../util/create-context";
-import { TFunction } from "../../util/i18n/i18n.context";
+import { TFunction } from "../../util/i18n/i18n.types";
 
 interface DateTranslationContextProps {
   translate: TFunction<"DatePicker">;

package/src/date/datepicker/DatePicker.tsx

@@ -5,7 +5,7 @@ import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
 import { DateInputContext, DateTranslationContextProvider } from "../context";
 import { DatePickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";

package/src/date/datepicker/DatePickerStandalone.tsx

@@ -3,7 +3,7 @@ import { isWeekend } from "date-fns";
 import React, { forwardRef } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
-import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
 import { DateTranslationContextProvider } from "../context";
 import { getLocaleFromString, getTranslations } from "../utils";
 import Caption from "./parts/Caption";

package/src/date/datepicker/datepicker.test.tsx

@@ -1,4 +1,4 @@
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, test } from "vitest";
@@ -23,9 +23,6 @@ describe("Render datepicker", () => {
   test("Should not crash when e.target is window", async () => {
     render(<App />);
 
-    // eslint-disable-next-line testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
-    await act(async () => {
-      await userEvent.click(screen.getByText("Velg dato"));
-    });
+    await userEvent.click(screen.getByText("Velg dato"));
   });
 });

package/src/date/hooks/useDatepicker.tsx

@@ -1,7 +1,7 @@
 import { differenceInCalendarDays, isWeekend } from "date-fns";
 import React, { useCallback, useState } from "react";
 import { DayClickEventHandler, isMatch } from "react-day-picker";
-import { useDateLocale } from "../../util/i18n/i18n.context";
+import { useDateLocale } from "../../util/i18n/i18n.hooks";
 import { DatePickerProps } from "../datepicker/DatePicker";
 import { DateInputProps } from "../parts/DateInput";
 import {

package/src/date/hooks/useMonthPicker.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from "react";
-import { useDateLocale } from "../../util/i18n/i18n.context";
+import { useDateLocale } from "../../util/i18n/i18n.hooks";
 import { MonthPickerProps } from "../monthpicker/types";
 import { DateInputProps } from "../parts/DateInput";
 import {

package/src/date/hooks/useRangeDatepicker.test.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning */
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, expect, test } from "vitest";
@@ -29,10 +28,8 @@ describe("Writing in input sets correct values", () => {
 
     const fraInput = screen.getByRole("textbox", { name: "Fra" });
     const tilInput = screen.getByRole("textbox", { name: "Til" });
-    await act(async () => {
-      await userEvent.type(fraInput, "03.08.2022");
-      await userEvent.type(tilInput, "03.08.2022");
-    });
+    await userEvent.type(fraInput, "03.08.2022");
+    await userEvent.type(tilInput, "03.08.2022");
     const res = screen.getByTitle("res");
     expect(res.innerHTML).toEqual(
       JSON.stringify({
@@ -47,10 +44,8 @@ describe("Writing in input sets correct values", () => {
 
     const fraInput = screen.getByRole("textbox", { name: "Fra" });
     const tilInput = screen.getByRole("textbox", { name: "Til" });
-    await act(async () => {
-      await userEvent.type(fraInput, "03.08.2022");
-      await userEvent.type(tilInput, "02.08.2022");
-    });
+    await userEvent.type(fraInput, "03.08.2022");
+    await userEvent.type(tilInput, "02.08.2022");
     const res = screen.getByTitle("res");
     expect(res.innerHTML).toEqual(
       JSON.stringify({

package/src/date/hooks/useRangeDatepicker.tsx

@@ -5,7 +5,7 @@ import {
 } from "date-fns";
 import React, { useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
-import { useDateLocale } from "../../util/i18n/i18n.context";
+import { useDateLocale } from "../../util/i18n/i18n.hooks";
 import { DatePickerProps } from "../datepicker/DatePicker";
 import { DateInputProps } from "../parts/DateInput";
 import {

package/src/date/monthpicker/MonthPicker.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
 import {
   DateInputContext,
   DateTranslationContextProvider,

package/src/date/monthpicker/MonthPickerStandalone.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
-import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
 import {
   DateTranslationContextProvider,
   SharedMonthProvider,

package/src/date/parts/DateWrapper.tsx

@@ -5,7 +5,8 @@ import { Modal } from "../../modal";
 import { useModalContext } from "../../modal/Modal.context";
 import { Popover } from "../../popover";
 import { useMedia } from "../../util/hooks";
-import { TFunction, useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
+import { TFunction } from "../../util/i18n/i18n.types";
 import { getGlobalTranslations } from "../utils";
 
 const variantToLabel = {

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 import { ExpansionCardContext } from "./context";
 
 export interface ExpansionCardHeaderProps

package/src/form/ReadOnlyIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export const ReadOnlyIcon = () => (
   <PadlockLockedFillIcon

package/src/form/combobox/FilteredOptions/AddNewOption.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React from "react";
 import { PlusIcon } from "@navikt/aksel-icons";
 import { BodyShort, Label } from "../../../typography";
-import { useI18n } from "../../../util/i18n/i18n.context";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { isInList, toComboboxOption } from "../combobox-utils";

package/src/form/combobox/FilteredOptions/LoadingMessage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Loader } from "../../../loader";
-import { useI18n } from "../../../util/i18n/i18n.context";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";
 

package/src/form/combobox/FilteredOptions/MaxSelectedMessage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useI18n } from "../../../util/i18n/i18n.context";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import filteredOptionsUtil from "./filtered-options-util";

package/src/form/error-summary/ErrorSummary.tsx

@@ -3,7 +3,7 @@ import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { BodyShort, Heading } from "../../typography";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useMergeRefs } from "../../util/hooks";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import ErrorSummaryItem from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps

package/src/form/file-upload/parts/dropzone/Dropzone.tsx

@@ -5,7 +5,7 @@ import { Button } from "../../../../button";
 import { BodyShort, ErrorMessage, Label } from "../../../../typography";
 import { composeEventHandlers } from "../../../../util/composeEventHandlers";
 import { useId } from "../../../../util/hooks";
-import { useI18n } from "../../../../util/i18n/i18n.context";
+import { useI18n } from "../../../../util/i18n/i18n.hooks";
 import { omit } from "../../../../util/omit";
 import { useFormField } from "../../../useFormField";
 import { useFileUploadTranslation } from "../../FileUpload.context";

package/src/form/file-upload/parts/item/Item.tsx

@@ -3,7 +3,7 @@ import React, { MouseEvent, forwardRef } from "react";
 import { ExclamationmarkTriangleIcon } from "@navikt/aksel-icons";
 import { BodyShort } from "../../../../typography";
 import { OverridableComponent } from "../../../../util";
-import { useI18n } from "../../../../util/i18n/i18n.context";
+import { useI18n } from "../../../../util/i18n/i18n.hooks";
 import { ComponentTranslation } from "../../../../util/i18n/i18n.types";
 import { useFileUploadTranslation } from "../../FileUpload.context";
 import { FileItem } from "./Item.types";

package/src/form/form-progress/FormProgress.tsx

@@ -6,7 +6,7 @@ import { HStack } from "../../layout/stack";
 import { ProgressBar } from "../../progress-bar";
 import { Stepper, StepperStepProps } from "../../stepper";
 import { BodyShort } from "../../typography";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { ComponentTranslation } from "../../util/i18n/i18n.types";
 
 export interface FormProgressProps

package/src/form/form-summary/FormSummaryEditLink.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Link } from "../../link";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { OverridableComponent } from "../../util/types";
 
 export interface FormSummaryEditProps

package/src/form/search/Search.tsx

@@ -11,7 +11,7 @@ import { useThemeInternal } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
 import { SearchContext } from "./context";

package/src/form/search/SearchButton.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef, useContext } from "react";
 import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../../button";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { SearchContext } from "./context";
 
 export interface SearchButtonProps

package/src/form/textarea/TextareaCounter.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { useEffect, useState } from "react";
 import { BodyShort } from "../../typography";
 import debounce from "../../util/debounce";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import type { TextareaProps } from "./Textarea";
 
 interface Props {

package/src/guide-panel/Illustration.darkside.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export const DarksideGudiepanelIllustration = () => {
   const translate = useI18n("GuidePanel");

package/src/guide-panel/Illustration.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export const DefaultIllustration = () => {
   const translate = useI18n("GuidePanel");

package/src/help-text/HelpText.tsx

@@ -4,7 +4,7 @@ import { Popover, PopoverProps } from "../popover";
 import { useThemeInternal } from "../theme/Theme";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 import { HelpTextIcon } from "./HelpTextIcon";
 
 export interface HelpTextProps

package/src/loader/Loader.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { SVGProps, forwardRef } from "react";
 import { omit } from "../util";
 import { useId } from "../util/hooks";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
   /**

package/src/modal/ModalHeader.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../button";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 import { useModalContext } from "./Modal.context";
 
 export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/pagination/Pagination.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 import PaginationItem, {
   PaginationItemProps,
   PaginationItemType,

package/src/progress-bar/ProgressBar.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useEffect, useRef } from "react";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 interface ProgressBarPropsBase
   extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {

package/src/table/ExpandableRow.tsx

@@ -4,7 +4,7 @@ import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 import AnimateHeight from "./AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";

package/src/tabs/Tabs.test.tsx

@@ -1,4 +1,4 @@
-import { act, fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, expect, test } from "vitest";
@@ -154,19 +154,11 @@ describe("Tabs", () => {
     expect(screen.getByTestId("tab2")).toHaveFocus();
 
     /* Move focus to tabPanel */
-    // eslint-disable-next-line testing-library/no-unnecessary-act
-    await act(async () => {
-      /* Tablist handles tabbing with setTimeout, so we need to use act */
-      await userEvent.tab();
-    });
-
+    await userEvent.tab();
     expect(screen.getByTestId("tabpanel1")).toHaveFocus();
-    /* Move focus back to tablist, now tab1 should have focus */
 
-    // eslint-disable-next-line testing-library/no-unnecessary-act
-    await act(async () => {
-      await userEvent.tab({ shift: true });
-    });
+    /* Move focus back to tablist, now tab1 should have focus */
+    await userEvent.tab({ shift: true });
     expect(screen.getByTestId("tab1")).toHaveFocus();
   });
 });

package/src/timeline/AxisLabels.tsx

@@ -16,7 +16,8 @@ import {
 } from "date-fns";
 import React from "react";
 import { Detail } from "../typography/Detail";
-import { TFunction, useDateLocale, useI18n } from "../util/i18n/i18n.context";
+import { useDateLocale, useI18n } from "../util/i18n/i18n.hooks";
+import { TFunction } from "../util/i18n/i18n.types";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { isVisible } from "./utils";
 import { horizontalPositionAndWidth } from "./utils/calc";

package/src/timeline/Pin.tsx

@@ -17,7 +17,7 @@ import { format } from "date-fns";
 import React, { forwardRef, useRef, useState } from "react";
 import { useThemeInternal } from "../theme/Theme";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { position } from "./utils/calc";
 import { TimelineComponentTypes } from "./utils/types.internal";

package/src/timeline/TimelineRow.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import { format } from "date-fns";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../typography/BodyShort";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 import { PeriodContext } from "./hooks/usePeriodContext";
 import { useRowContext } from "./hooks/useRowContext";
 import { useTimelineContext } from "./hooks/useTimelineContext";

package/src/timeline/period/ClickablePeriod.tsx

@@ -17,7 +17,7 @@ import cl from "clsx";
 import React, { useRef, useState } from "react";
 import { useThemeInternal } from "../../theme/Theme";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";

package/src/timeline/period/NonClickablePeriod.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React from "react";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { ariaLabel, getConditionalClasses } from "../utils/period";
 import type { PeriodProps } from "./types";
 

package/src/timeline/utils/period.ts

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import { format } from "date-fns";
-import type { TFunction } from "../../util/i18n/i18n.context";
+import type { TFunction } from "../../util/i18n/i18n.types";
 import type { PeriodProps } from "../period/types";
 
 export const getConditionalClasses = (

package/src/timeline/zoom/ZoomButton.tsx

@@ -8,7 +8,7 @@ import {
 } from "date-fns";
 import React, { forwardRef } from "react";
 import { Detail } from "../../typography/Detail";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { useTimelineContext } from "../hooks/useTimelineContext";
 
 export interface TimelineZoomButtonProps {

package/src/util/i18n/{i18n.context.test.tsx → i18n.hooks.test.tsx}

@@ -2,9 +2,8 @@ import { renderHook } from "@testing-library/react";
 import React from "react";
 import { describe, expect, test } from "vitest";
 import { Provider } from "../../provider";
-import { useI18n } from "./i18n.context";
-import en from "./locales/en";
-import nb from "./locales/nb";
+import { useDateLocale, useI18n } from "./i18n.hooks";
+import { en, nb, nn } from "./locales";
 
 describe("useI18n", () => {
   test("should throw error if key is not found", () => {
@@ -112,3 +111,63 @@ describe("useI18n", () => {
     expect(() => translate("item.uploading", { other: "John" })).toThrowError();
   });
 });
+
+describe("useDateLocale", () => {
+  test("should return the default NB date locale when Provider is not used", () => {
+    const { result } = renderHook(() => useDateLocale());
+    const dateLocale = result.current;
+    expect(dateLocale).toBe(nb.global.dateLocale);
+  });
+
+  test("should return the default NB date locale when Provider is used without the locale prop", () => {
+    const { result } = renderHook(() => useDateLocale(), {
+      wrapper: ({ children }) => <Provider>{children}</Provider>,
+    });
+    const dateLocale = result.current;
+    expect(dateLocale).toBe(nb.global.dateLocale);
+  });
+
+  test("should return date locale from context.locale when using Provider with just locale prop", () => {
+    const { result } = renderHook(() => useDateLocale(), {
+      wrapper: ({ children }) => <Provider locale={en}>{children}</Provider>,
+    });
+    const dateLocale = result.current;
+    expect(dateLocale).toBe(en.global.dateLocale);
+  });
+
+  test("should return date locale from context.locale when it does not exist in translations", () => {
+    const { result } = renderHook(() => useDateLocale(), {
+      wrapper: ({ children }) => (
+        <Provider locale={en} translations={{ global: {} }}>
+          {children}
+        </Provider>
+      ),
+    });
+    const dateLocale = result.current;
+    expect(dateLocale).toBe(en.global.dateLocale);
+  });
+
+  test("should return date locale from context.translations", () => {
+    const { result } = renderHook(() => useDateLocale(), {
+      wrapper: ({ children }) => (
+        <Provider locale={en} translations={nn}>
+          {children}
+        </Provider>
+      ),
+    });
+    const dateLocale = result.current;
+    expect(dateLocale).toBe(nn.global.dateLocale);
+  });
+
+  test("should return date locale from second object in context.translations", () => {
+    const { result } = renderHook(() => useDateLocale(), {
+      wrapper: ({ children }) => (
+        <Provider locale={nb} translations={[{}, nn, en]}>
+          {children}
+        </Provider>
+      ),
+    });
+    const dateLocale = result.current;
+    expect(dateLocale).toBe(nn.global.dateLocale);
+  });
+});