Bump the development-dependencies group across 1 directory with 18 updates

package.json

@@ -26,47 +26,46 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.2",
-    "@eslint/css": "^0.14.1",
-    "@eslint/js": "^9.39.2",
+    "@eslint/css": "^1.1.0",
+    "@eslint/js": "^10.0.1",
     "@faker-js/faker": "^10.4.0",
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/addon-links": "^10.3.5",
     "@storybook/addon-onboarding": "^10.3.5",
     "@storybook/addon-themes": "^10.3.5",
     "@storybook/react-vite": "^10.3.5",
     "@tailwindcss/forms": "^0.5.11",
-    "@tailwindcss/vite": "^4.2.2",
+    "@tailwindcss/vite": "^4.2.4",
     "@tanstack/eslint-plugin-query": "^5.100.1",
     "@tanstack/react-query-devtools": "^5.100.1",
     "@tanstack/react-router-devtools": "^1.166.13",
     "@tanstack/router-vite-plugin": "^1.166.38",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/eslint__js": "^9.14.0",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.3.0",
     "concurrently": "^9.2.1",
-    "eslint": "^9.39.2",
+    "eslint": "^10.2.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-perfectionist": "^5.7.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-perfectionist": "^5.9.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
-    "eslint-plugin-storybook": "^10.3.3",
+    "eslint-plugin-storybook": "^10.3.5",
     "fishery": "^2.4.0",
-    "globals": "^17.4.0",
-    "jsdom": "^29.0.1",
-    "prettier": "^3.8.1",
-    "prettier-plugin-tailwindcss": "^0.7.2",
+    "globals": "^17.5.0",
+    "jsdom": "^29.0.2",
+    "prettier": "^3.8.3",
+    "prettier-plugin-tailwindcss": "^0.7.3",
     "storybook": "^10.3.5",
-    "tailwind-csstree": "0.1.4",
+    "tailwind-csstree": "0.3.1",
     "tailwindcss": "^4.1.8",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.2",
-    "vite": "^7.3.2",
-    "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^4.1.1"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.0",
+    "vite": "^8.0.10",
+    "vitest": "^4.1.5"
   },
   "overrides": {
     "storybook": "$storybook"

src/components/TagInput.tsx

@@ -1,5 +1,5 @@
 import { XMarkIcon } from "@heroicons/react/20/solid";
-import { KeyboardEvent, useEffect, useState } from "react";
+import { KeyboardEvent, useState } from "react";
 
 import { Badge, type BadgeColor } from "./Badge";
 
@@ -28,42 +28,29 @@ const TagInput = ({
   tags = [],
 }: TagInputProps) => {
   const [inputValue, setInputValue] = useState("");
-  const [internalTags, setInternalTags] = useState<string[]>(tags);
-
-  // Update internal tags when external tags change
-  useEffect(() => {
-    setInternalTags(tags);
-  }, [tags]);
 
   const addTag = (tag: string) => {
     const trimmedTag = tag.trim();
-    if (trimmedTag && !internalTags.includes(trimmedTag)) {
-      const newTags = [...internalTags, trimmedTag];
-      setInternalTags(newTags);
+    if (trimmedTag && !tags.includes(trimmedTag)) {
+      const newTags = [...tags, trimmedTag];
       onChange(newTags);
     }
     setInputValue("");
   };
 
   const removeTag = (tagToRemove: string) => {
-    const newTags = internalTags.filter((tag) => tag !== tagToRemove);
-    setInternalTags(newTags);
+    const newTags = tags.filter((tag) => tag !== tagToRemove);
     onChange(newTags);
   };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && inputValue) {
       e.preventDefault();
       addTag(inputValue);
-    } else if (
-      e.key === "Backspace" &&
-      !inputValue &&
-      internalTags.length > 0
-    ) {
+    } else if (e.key === "Backspace" && !inputValue && tags.length > 0) {
       // Remove the last tag when backspace is pressed and input is empty
-      const newTags = [...internalTags];
+      const newTags = [...tags];
       newTags.pop();
-      setInternalTags(newTags);
       onChange(newTags);
     }
   };
@@ -76,7 +63,7 @@ const TagInput = ({
         } dark:border-slate-600 dark:bg-slate-700`}
         style={{ minHeight: "38px" }}
       >
-        {internalTags.map((tag) => (
+        {tags.map((tag) => (
           <div className="flex items-center" key={tag}>
             <Badge className="flex items-center gap-1" color={badgeColor}>
               <span className="py-0.5">{tag}</span>
@@ -100,7 +87,7 @@ const TagInput = ({
           name={name}
           onChange={(e) => setInputValue(e.target.value)}
           onKeyDown={handleKeyDown}
-          placeholder={internalTags.length === 0 ? placeholder : ""}
+          placeholder={tags.length === 0 ? placeholder : ""}
           type="text"
           value={inputValue}
         />

src/components/job-search/JobSearch.test.tsx

@@ -10,6 +10,47 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import { Filter, FilterTypeId, JobSearch } from "./JobSearch";
 
+vi.mock("./api", () => ({
+  fetchSuggestions: async (
+    filterTypeId: string,
+    query: string,
+    selectedValues: string[],
+  ) => {
+    if (filterTypeId === "kind") {
+      const mockKinds = [
+        "batch",
+        "stream",
+        "scheduled",
+        "one-time",
+        "recurring",
+        "Chaos",
+        "AITrainingBatch",
+        "UtilizeNewModel",
+      ];
+      return mockKinds
+        .filter((kind) => kind.toLowerCase().includes(query.toLowerCase()))
+        .filter((kind) => !selectedValues.includes(kind));
+    } else if (filterTypeId === "queue") {
+      const mockQueues = [
+        "default",
+        "high-priority",
+        "low-priority",
+        "batch",
+        "realtime",
+      ];
+      return mockQueues
+        .filter((queue) => queue.includes(query.toLowerCase()))
+        .filter((queue) => !selectedValues.includes(queue));
+    } else if (filterTypeId === "priority") {
+      const priorities = ["1", "2", "3", "4"];
+      return priorities
+        .filter((priority) => priority.includes(query))
+        .filter((priority) => !selectedValues.includes(priority));
+    }
+    return [];
+  },
+}));
+
 // Add type declarations for test functions
 declare module "vitest" {
   interface Assertion<T> {
@@ -20,46 +61,6 @@ declare module "vitest" {
 describe("JobSearch", () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    vi.mock("./api", () => ({
-      fetchSuggestions: async (
-        filterTypeId: string,
-        query: string,
-        selectedValues: string[],
-      ) => {
-        if (filterTypeId === "kind") {
-          const mockKinds = [
-            "batch",
-            "stream",
-            "scheduled",
-            "one-time",
-            "recurring",
-            "Chaos",
-            "AITrainingBatch",
-            "UtilizeNewModel",
-          ];
-          return mockKinds
-            .filter((kind) => kind.toLowerCase().includes(query.toLowerCase()))
-            .filter((kind) => !selectedValues.includes(kind));
-        } else if (filterTypeId === "queue") {
-          const mockQueues = [
-            "default",
-            "high-priority",
-            "low-priority",
-            "batch",
-            "realtime",
-          ];
-          return mockQueues
-            .filter((queue) => queue.includes(query.toLowerCase()))
-            .filter((queue) => !selectedValues.includes(queue));
-        } else if (filterTypeId === "priority") {
-          const priorities = ["1", "2", "3", "4"];
-          return priorities
-            .filter((priority) => priority.includes(query))
-            .filter((priority) => !selectedValues.includes(priority));
-        }
-        return [];
-      },
-    }));
   });
 
   describe("Basic Rendering & Props", () => {

src/test/setup.ts

@@ -15,6 +15,13 @@ class ResizeObserverMock {
 
 global.ResizeObserver = ResizeObserverMock;
 
+// JSDOM does not implement scrolling APIs used by router and focus helpers.
+Object.defineProperty(window, "scrollTo", {
+  configurable: true,
+  value: () => {},
+  writable: true,
+});
+
 // Headless UI relies on the Web Animations API for transitions. JSDOM doesn't
 // implement it, and Headless UI will polyfill with warnings (and may behave
 // differently across versions). Provide a minimal stable polyfill.

tsconfig.json

@@ -21,9 +21,8 @@
     "noFallthroughCasesInSwitch": true,
 
     // allow importing services by @services:
-    "baseUrl": "./src",
     "paths": {
-      "@*": ["./*"]
+      "@*": ["./src/*"]
     },
     "typeRoots": ["../../node_modules/@heroicons/**/*.d.ts"]
   },

vite.config.ts

@@ -3,7 +3,6 @@ import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react-swc";
 import path from "node:path";
 import { defineConfig } from "vite";
-import tsconfigPaths from "vite-tsconfig-paths";
 
 const dagreCjsPath = path.resolve(
   process.cwd(),
@@ -18,12 +17,25 @@ export default defineConfig({
     rollupOptions: {
       input: "src/main.tsx",
       output: {
-        manualChunks: {
+        manualChunks(id) {
           // use vite-bundle-visualizer to find good candidates for manual chunks:
-          dagrejs: ["@dagrejs/dagre"],
-          headlessui: ["@headlessui/react"],
-          "react-dom": ["react-dom"],
-          reactflow: ["@xyflow/react"],
+          const normalizedId = id.replaceAll("\\", "/");
+
+          if (normalizedId.includes("/node_modules/@dagrejs/dagre/")) {
+            return "dagrejs";
+          }
+
+          if (normalizedId.includes("/node_modules/@headlessui/react/")) {
+            return "headlessui";
+          }
+
+          if (normalizedId.includes("/node_modules/react-dom/")) {
+            return "react-dom";
+          }
+
+          if (normalizedId.includes("/node_modules/@xyflow/react/")) {
+            return "reactflow";
+          }
         },
       },
     },
@@ -36,11 +48,11 @@ export default defineConfig({
     tanstackRouter({
       routeFileIgnorePattern: ".(const|schema|test).(ts|tsx)",
     }),
-    tsconfigPaths(),
   ],
   resolve: {
     alias: {
       "@dagrejs/dagre": dagreCjsPath,
     },
+    tsconfigPaths: true,
   },
 });

vitest.config.ts

@@ -1,8 +1,9 @@
-import tsconfigPaths from "vite-tsconfig-paths";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
-  plugins: [tsconfigPaths()],
+  resolve: {
+    tsconfigPaths: true,
+  },
   test: {
     environment: "jsdom",
     globals: true,