chore(deps): bump react-i18next from 11.16.6 to 12.1.1 (#4634)

* chore(deps): bump react-i18next from 11.16.6 to 12.1.1

Bumps [react-i18next](https://github.com/i18next/react-i18next) from 11.16.6 to 12.1.1.
- [Release notes](https://github.com/i18next/react-i18next/releases)
- [Changelog](https://github.com/i18next/react-i18next/blob/master/CHANGELOG.md)
- [Commits](https://github.com/i18next/react-i18next/compare/v11.16.6...v12.1.1)

---
updated-dependencies:
- dependency-name: react-i18next
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* Update related deps, TS fixes

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/components/DocumentTasks.tsx

@@ -1,7 +1,8 @@
+import { TFunction } from "i18next";
 import { observer } from "mobx-react";
 import { DoneIcon } from "outline-icons";
 import * as React from "react";
-import { useTranslation, TFunction } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
 import Document from "~/models/Document";
 import CircularProgressBar from "~/components/CircularProgressBar";

app/components/PaginatedList.test.tsx

@@ -1,5 +1,6 @@
 import "../stores";
 import { shallow } from "enzyme";
+import { TFunction } from "i18next";
 import * as React from "react";
 import { getI18n } from "react-i18next";
 import { DEFAULT_PAGINATION_LIMIT } from "~/stores/BaseStore";
@@ -16,7 +17,7 @@ describe("PaginatedList", () => {
   const props = {
     i18n,
     tReady: true,
-    t: (key: string) => key,
+    t: ((key: string) => key) as TFunction,
     logout: () => {
       //
     },

app/components/Tooltip.tsx

@@ -1,11 +1,10 @@
 import Tippy, { TippyProps } from "@tippyjs/react";
-import { TFunctionResult } from "i18next";
 import * as React from "react";
 import styled, { createGlobalStyle } from "styled-components";
 import { roundArrow } from "tippy.js";
 
 export type Props = Omit<TippyProps, "content" | "theme"> & {
-  tooltip: React.ReactChild | React.ReactChild[] | TFunctionResult;
+  tooltip?: React.ReactChild | React.ReactChild[];
   shortcut?: React.ReactNode;
 };
 

app/types.ts

@@ -1,5 +1,5 @@
 import { Location, LocationDescriptor } from "history";
-import { TFunction } from "react-i18next";
+import { TFunction } from "i18next";
 import RootStore from "~/stores/RootStore";
 import Document from "./models/Document";
 import FileOperation from "./models/FileOperation";

app/typings/i18next.d.ts

@@ -0,0 +1,7 @@
+import "i18next";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    returnNull: false;
+  }
+}

app/utils/date.ts

@@ -6,8 +6,8 @@ import {
   differenceInCalendarYears,
   format as formatDate,
 } from "date-fns";
+import { TFunction } from "i18next";
 import { startCase } from "lodash";
-import { TFunction } from "react-i18next";
 import {
   getCurrentDateAsString,
   getCurrentDateTimeAsString,