refactor: update type definitions for react-router-tabs (#41998)

* feat: update types for react-router-tabs

* test: rewrite tests with jsx

* refactor: change NavTab type

types/react-router-tabs/index.d.ts

@@ -3,24 +3,17 @@
 // Definitions by: Joakim Unge <https://github.com/joakimunge>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
-import { Route, Link, RouteProps } from 'react-router-dom';
-import { ReactNode } from 'react';
+import { Route, Link, RouteProps, LinkProps, NavLinkProps } from 'react-router-dom';
+import { ReactNode, ComponentType } from 'react';
 
 export type AriaCurrent = 'page' | 'step' | 'location' | 'date' | 'time' | 'true';
 
-export interface NavTabProps {
-    to: string | object;
-    replace?: boolean;
-    exact?: boolean;
-    strict?: boolean;
-    activeClassName?: string;
-    className?: string;
-    activeStyle?: object;
-    style?: object;
-    'aria-current'?: AriaCurrent;
+export interface NavTabProps extends NavLinkProps {
+    style?: React.CSSProperties;
     disabled?: boolean;
+    allowClickOnActive?: boolean;
+    'aria-current'?: AriaCurrent;
 }
-
 export interface RoutedTabsProps {
     startPathWith?: string;
     className?: string;
@@ -32,5 +25,6 @@ export interface RoutedTabsProps {
     children?: ReactNode;
 }
 
-export function NavTab(props: NavTabProps): Route;
-export function RoutedTabs(props: RoutedTabsProps): ReactNode;
+export const NavTab: ComponentType<NavTabProps>;
+
+export const RoutedTabs: ComponentType<RoutedTabsProps>;

types/react-router-tabs/react-router-tabs-tests.ts

@@ -1,4 +0,0 @@
-import { NavTab, RoutedTabs } from 'react-router-tabs';
-
-NavTab({ to: 'path' }); // $ExpectType Route<RouteProps>
-RoutedTabs({}); // $ExpectType ReactNode

types/react-router-tabs/react-router-tabs-tests.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { NavTab, RoutedTabs } from 'react-router-tabs';
+
+const NavTabTest: React.FC = () => {
+    return (
+        <div>
+            <NavTab to="/home">Home</NavTab>
+        </div>
+    );
+};
+
+const RoutedTabsTest: React.FC = () => {
+    return (
+        <RoutedTabs startPathWith="/testbed">
+            <NavTab to="/home">Home</NavTab>
+            <NavTab to="/about">About</NavTab>
+            <NavTab to="/contact">Contact</NavTab>
+        </RoutedTabs>
+    );
+};
+
+export { NavTabTest, RoutedTabsTest };

types/react-router-tabs/tsconfig.json

@@ -2,6 +2,7 @@
     "compilerOptions": {
         "module": "commonjs",
         "lib": ["es6"],
+        "jsx": "react",
         "noImplicitAny": true,
         "noImplicitThis": true,
         "strictFunctionTypes": true,
@@ -12,5 +13,5 @@
         "noEmit": true,
         "forceConsistentCasingInFileNames": true
     },
-    "files": ["index.d.ts", "react-router-tabs-tests.ts"]
+    "files": ["index.d.ts", "react-router-tabs-tests.tsx"]
 }