fix typescript errors

package.json

@@ -28,7 +28,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "prettier": "^3.3.2",
-    "typescript": "^5.2.2",
+    "typescript": "^5.5.2",
     "vite": "^5.2.0"
   }
 }

src/components/AppLayout/AppLayout.tsx

@@ -1,28 +1,21 @@
 import "./AppLayout.css";
 
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet } from "react-router-dom";
 import { Sidebar } from "src/components/Sidebar/Sidebar";
 import { Tabs, TabsApi } from "src/components/Tabs/Tabs.tsx";
 
 import { TabStoreKey } from "src/constants/tabs.constants.ts";
-import {
-  pathToLocation,
-  TabModel,
-  useTabbedNavigation,
-} from "src/tabbed-navigation.tsx";
+import { useTabbedNavigation } from "src/tabbed-navigation.tsx";
 import * as routes from "src/constants/routes.constants.ts";
 import { useRef } from "react";
 
 export function AppLayout() {
-  const navigate = useNavigate();
-
-  const changeTab = (tab: TabModel | undefined) => {
-    navigate(tab ? pathToLocation(tab.path) : routes.homeRoute);
-  };
-
   const apiRef = useRef<TabsApi>();
 
-  const { activeTabId, tabs, setTabs } = useTabbedNavigation(TabStoreKey.Main);
+  const { activeTabId, tabs, setTabs, changeTab } = useTabbedNavigation(
+    TabStoreKey.Main,
+    routes.homeRoute,
+  );
 
   return (
     <div className="layout">

src/components/Tabs/Tabs.tsx

@@ -40,7 +40,7 @@ type Action =
     }
   | {
       type: "set-active-tab-id";
-      id: string;
+      id: string | undefined;
       onActiveTabChange?: (tab: TabModel | undefined) => void;
     };
 
@@ -100,7 +100,7 @@ export function Tabs(props: TabsProps) {
     activeTabId: undefined,
   });
 
-  useImperativeHandle<TabsApi>(apiRef, () => ({
+  useImperativeHandle(apiRef, () => ({
     setTabs: (tabsArg) => {
       const tabs =
         typeof tabsArg === "function" ? tabsArg(state.tabs) : tabsArg;

src/tabbed-navigation.tsx

@@ -4,6 +4,7 @@ import {
   matchRoutes,
   UIMatch,
   useMatches,
+  useNavigate,
 } from "react-router-dom";
 import { Handle, TabHandle } from "./router.tsx";
 import { TabStoreKey } from "src/constants/tabs.constants.ts";
@@ -75,15 +76,23 @@ export const useTabTitle = (tab: TabModel) => {
 };
 
 export const useActiveTabId = (key: TabStoreKey) => {
-  const matches = useMatches();
+  const matches = useMatches() as UIMatch<any, Handle>[];
   const storeMatches = matches.filter(getTabHandleUI(key));
 
   return storeMatches[storeMatches.length - 1]?.pathname;
 };
 
-export const useTabbedNavigation = (storeKey: TabStoreKey) => {
+export const useTabbedNavigation = (
+  storeKey: TabStoreKey,
+  fallbackPath: string,
+) => {
   const [tabs, setTabs] = useState<TabModel[]>([]);
   const { router } = useDataRouterContext();
+  const navigate = useNavigate();
+
+  const changeTab = (tab: TabModel | undefined) => {
+    navigate(tab ? pathToLocation(tab.path) : fallbackPath);
+  };
   const updateTabs = useCallback(
     (state: RouterState) => {
       const { matches, location, navigation } = state;
@@ -154,5 +163,6 @@ export const useTabbedNavigation = (storeKey: TabStoreKey) => {
     activeTabId,
     tabs,
     setTabs,
+    changeTab,
   };
 };

yarn.lock

@@ -1631,7 +1631,7 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
-typescript@^5.2.2:
+typescript@^5.5.2:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.2.tgz#c26f023cb0054e657ce04f72583ea2d85f8d0507"
   integrity sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==