chore: bump frontend further

src/frontend/package.json

@@ -19,28 +19,27 @@
         "@codemirror/state": "6.5.1",
         "@codemirror/theme-one-dark": "6.1.2",
         "@codemirror/view": "6.36.2",
-        "@emotion/react": "^11.13.3",
-        "@fortawesome/fontawesome-svg-core": "^6.6.0",
-        "@fortawesome/free-regular-svg-icons": "^6.6.0",
-        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@emotion/react": "^11.14.0",
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-regular-svg-icons": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
         "@lingui/core": "^4.11.4",
         "@lingui/react": "^4.11.4",
-        "@mantine/carousel": "^7.16.0",
-        "@mantine/charts": "^7.16.0",
-        "@mantine/core": "^7.16.0",
-        "@mantine/dates": "^7.16.0",
-        "@mantine/dropzone": "^7.16.0",
-        "@mantine/form": "^7.16.0",
-        "@mantine/hooks": "^7.16.0",
-        "@mantine/modals": "^7.16.0",
-        "@mantine/notifications": "^7.16.0",
-        "@mantine/spotlight": "^7.16.0",
-        "@mantine/vanilla-extract": "^7.16.0",
-        "@sentry/react": "^8.43.0",
-        "@tabler/icons-react": "^3.17.0",
-        "@tanstack/react-query": "^5.56.2",
-        "@types/dompurify": "^3.0.5",
+        "@mantine/carousel": "^7.16.1",
+        "@mantine/charts": "^7.16.1",
+        "@mantine/core": "^7.16.1",
+        "@mantine/dates": "^7.16.1",
+        "@mantine/dropzone": "^7.16.1",
+        "@mantine/form": "^7.16.1",
+        "@mantine/hooks": "^7.16.1",
+        "@mantine/modals": "^7.16.1",
+        "@mantine/notifications": "^7.16.1",
+        "@mantine/spotlight": "^7.16.1",
+        "@mantine/vanilla-extract": "^7.16.1",
+        "@sentry/react": "^8.51.0",
+        "@tabler/icons-react": "^3.29.0",
+        "@tanstack/react-query": "^5.64.2",
         "@uiw/codemirror-theme-vscode": "4.23.7",
         "@uiw/react-codemirror": "4.23.7",
         "@uiw/react-split": "^5.9.3",
@@ -49,39 +48,39 @@
         "clsx": "^2.1.1",
         "codemirror": "6.0.1",
         "dayjs": "^1.11.13",
-        "dompurify": "^3.1.7",
+        "dompurify": "^3.2.3",
         "easymde": "^2.18.0",
         "embla-carousel-react": "^8.5.2",
         "fuse.js": "^7.0.0",
         "html5-qrcode": "^2.3.8",
         "mantine-contextmenu": "^7.15.3",
         "mantine-datatable": "^7.15.1",
         "qrcode": "^1.5.4",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "react-grid-layout": "1.4.4",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-grid-layout": "^1.5.0",
         "react-hook-form": "^7.54.2",
-        "react-is": "^18.3.1",
+        "react-is": "^19.0.0",
         "react-router-dom": "^6.26.2",
         "react-select": "^5.9.0",
         "react-simplemde-editor": "^5.2.0",
-        "react-window": "1.8.10",
+        "react-window": "1.8.11",
         "recharts": "^2.15.0",
         "styled-components": "^6.1.14",
-        "zustand": "^4.5.5"
+        "zustand": "^5.0.3"
     },
     "devDependencies": {
         "@babel/core": "^7.26.0",
         "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.26.0",
-        "@codecov/vite-plugin": "^1.7.0",
+        "@codecov/vite-plugin": "^1.8.0",
         "@lingui/cli": "^4.11.4",
         "@lingui/macro": "^4.11.4",
-        "@playwright/test": "^1.49.1",
-        "@types/node": "^22.6.0",
+        "@playwright/test": "^1.50.0",
+        "@types/node": "^22.10.10",
         "@types/qrcode": "^1.5.5",
-        "@types/react": "^18.3.8",
-        "@types/react-dom": "^18.3.0",
+        "@types/react": "^19.0.8",
+        "@types/react-dom": "^19.0.3",
         "@types/react-grid-layout": "^1.3.5",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-window": "^1.8.8",
@@ -91,7 +90,7 @@
         "nyc": "^17.1.0",
         "rollup-plugin-license": "^3.5.3",
         "typescript": "^5.7.3",
-        "vite": "^6.0.9",
+        "vite": "^6.0.11",
         "vite-plugin-babel-macros": "^1.0.6",
         "vite-plugin-istanbul": "^6.0.2"
     }

src/frontend/playwright.config.ts

@@ -5,18 +5,12 @@ export default defineConfig({
   fullyParallel: true,
   timeout: 90000,
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
+  retries: 0,
   workers: process.env.CI ? 3 : undefined,
   reporter: process.env.CI ? [['html', { open: 'never' }], ['github']] : 'list',
 
   /* Configure projects for major browsers */
   projects: [
-    {
-      name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome']
-      }
-    },
     {
       name: 'firefox',
       use: {

src/frontend/src/components/Boundary.tsx

@@ -23,7 +23,7 @@ export function Boundary({
 }: Readonly<{
   children: ReactNode;
   label: string;
-  fallback?: React.ReactElement | FallbackRender;
+  fallback?: React.ReactElement<any> | FallbackRender;
 }>): ReactNode {
   const onError = useCallback(
     (error: unknown, componentStack: string | undefined, eventId: string) => {

src/frontend/src/components/buttons/CopyButton.tsx

@@ -10,6 +10,8 @@ import {
 
 import { InvenTreeIcon } from '../../functions/icons';
 
+import type { JSX } from 'react';
+
 export function CopyButton({
   value,
   label,

src/frontend/src/components/buttons/EditButton.tsx

@@ -1,6 +1,8 @@
 import { ActionIcon } from '@mantine/core';
 import { IconDeviceFloppy, IconEdit } from '@tabler/icons-react';
 
+import type { JSX } from 'react';
+
 export function EditButton({
   setEditing,
   editing,

src/frontend/src/components/buttons/SSOButton.tsx

@@ -17,6 +17,8 @@ import {
 import { t } from '@lingui/macro';
 import type { Provider } from '../../states/states';
 
+import type { JSX } from 'react';
+
 const brandIcons: { [key: string]: JSX.Element } = {
   google: <IconBrandGoogle />,
   github: <IconBrandGithub />,

src/frontend/src/components/dashboard/DashboardWidget.tsx

@@ -4,6 +4,8 @@ import { IconX } from '@tabler/icons-react';
 
 import { Boundary } from '../Boundary';
 
+import type { JSX } from 'react';
+
 /**
  * Dashboard widget properties.
  *

src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx

@@ -86,8 +86,8 @@ export type TemplateEditorProps = {
 
 export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
   const { templateUrl, editors, previewAreas, template } = props;
-  const editorRef = useRef<EditorRef>();
-  const previewRef = useRef<PreviewAreaRef>();
+  const editorRef = useRef<EditorRef>(undefined);
+  const previewRef = useRef<PreviewAreaRef>(undefined);
 
   const [hasSaveConfirmed, setHasSaveConfirmed] = useState(false);
 
@@ -100,7 +100,7 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
     previewAreas[0].key
   );
 
-  const codeRef = useRef<string | undefined>();
+  const codeRef = useRef<string | undefined>(undefined);
 
   const loadCodeToEditor = useCallback(async (code: string) => {
     try {

src/frontend/src/components/forms/ApiForm.tsx

@@ -13,6 +13,7 @@ import {
 import { useId } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
+import type { JSX } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   type FieldValues,

src/frontend/src/components/forms/AuthFormOptions.tsx

@@ -1,6 +1,7 @@
 import { Center, Group, Text, Tooltip } from '@mantine/core';
 import { IconServer } from '@tabler/icons-react';
 
+import { useShallow } from 'zustand/react/shallow';
 import { useServerApiState } from '../../states/ApiState';
 import { ColorToggle } from '../items/ColorToggle';
 import { LanguageToggle } from '../items/LanguageToggle';
@@ -12,7 +13,7 @@ export function AuthFormOptions({
   hostname: string;
   toggleHostEdit: () => void;
 }>) {
-  const [server] = useServerApiState((state) => [state.server]);
+  const [server] = useServerApiState(useShallow((state) => [state.server]));
 
   return (
     <Center mx={'md'}>

src/frontend/src/components/forms/AuthenticationForm.tsx

@@ -16,6 +16,7 @@ import { useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { showNotification } from '@mantine/notifications';
+import { useShallow } from 'zustand/react/shallow';
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import {
@@ -34,7 +35,9 @@ export function AuthenticationForm() {
   });
   const simpleForm = useForm({ initialValues: { email: '' } });
   const [classicLoginMode, setMode] = useDisclosure(true);
-  const [auth_settings] = useServerApiState((state) => [state.auth_settings]);
+  const [auth_settings] = useServerApiState(
+    useShallow((state) => [state.auth_settings])
+  );
   const navigate = useNavigate();
   const location = useLocation();
   const { isLoggedIn } = useUserState();
@@ -188,7 +191,9 @@ export function RegistrationForm() {
     initialValues: { username: '', email: '', password1: '', password2: '' }
   });
   const navigate = useNavigate();
-  const [auth_settings] = useServerApiState((state) => [state.auth_settings]);
+  const [auth_settings] = useServerApiState(
+    useShallow((state) => [state.auth_settings])
+  );
   const [isRegistering, setIsRegistering] = useState<boolean>(false);
 
   function handleRegistration() {
@@ -297,7 +302,9 @@ export function ModeSelector({
   loginMode: boolean;
   setMode: any;
 }>) {
-  const [auth_settings] = useServerApiState((state) => [state.auth_settings]);
+  const [auth_settings] = useServerApiState(
+    useShallow((state) => [state.auth_settings])
+  );
   const registration_enabled =
     auth_settings?.registration_enabled ||
     auth_settings?.sso_registration ||

src/frontend/src/components/forms/InstanceOptions.tsx

@@ -3,6 +3,7 @@ import { Divider, Group, Select, Text, Title } from '@mantine/core';
 import { useToggle } from '@mantine/hooks';
 import { IconCheck } from '@tabler/icons-react';
 
+import { useShallow } from 'zustand/react/shallow';
 import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
 import type { HostList } from '../../states/states';
@@ -19,11 +20,9 @@ export function InstanceOptions({
   setHostEdit: () => void;
 }>) {
   const [HostListEdit, setHostListEdit] = useToggle([false, true] as const);
-  const [setHost, setHostList, hostList] = useLocalState((state) => [
-    state.setHost,
-    state.setHostList,
-    state.hostList
-  ]);
+  const [setHost, setHostList, hostList] = useLocalState(
+    useShallow((state) => [state.setHost, state.setHostList, state.hostList])
+  );
   const hostListData = Object.keys(hostList).map((key) => ({
     value: key,
     label: hostList[key]?.name
@@ -89,7 +88,7 @@ function ServerInfo({
   hostList: HostList;
   hostKey: string;
 }>) {
-  const [server] = useServerApiState((state) => [state.server]);
+  const [server] = useServerApiState(useShallow((state) => [state.server]));
 
   return (
     <Text>

src/frontend/src/components/forms/fields/ApiFormField.tsx

@@ -2,7 +2,13 @@ import { t } from '@lingui/macro';
 import { Alert, FileInput, NumberInput, Stack, Switch } from '@mantine/core';
 import type { UseFormReturnType } from '@mantine/form';
 import { useId } from '@mantine/hooks';
-import { type ReactNode, useCallback, useEffect, useMemo } from 'react';
+import {
+  type JSX,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo
+} from 'react';
 import { type Control, type FieldValues, useController } from 'react-hook-form';
 
 import type { ModelType } from '../../../enums/ModelType';

src/frontend/src/components/forms/fields/IconField.tsx

@@ -20,6 +20,7 @@ import { startTransition, useEffect, useMemo, useRef, useState } from 'react';
 import type { FieldValues, UseControllerReturn } from 'react-hook-form';
 import { FixedSizeGrid as Grid } from 'react-window';
 
+import { useShallow } from 'zustand/react/shallow';
 import { useIconState } from '../../../states/IconState';
 import { ApiIcon } from '../../items/ApiIcon';
 import type { ApiFormFieldType } from './ApiFormField';
@@ -118,7 +119,7 @@ function ComboboxDropdown({
   onChange: (newVal: string | null) => void;
   open: boolean;
 }>) {
-  const iconPacks = useIconState((s) => s.packages);
+  const iconPacks = useIconState(useShallow((s) => s.packages));
   const icons = useMemo<RenderIconType[]>(() => {
     return iconPacks.flatMap((pack) =>
       Object.entries(pack.icons).flatMap(([name, icon]) =>

src/frontend/src/components/items/ApiIcon.tsx

@@ -1,3 +1,4 @@
+import { useShallow } from 'zustand/react/shallow';
 import { useIconState } from '../../states/IconState';
 import * as classes from './ApiIcon.css';
 
@@ -9,7 +10,9 @@ type ApiIconProps = {
 export const ApiIcon = ({ name: _name, size = 22 }: ApiIconProps) => {
   const [iconPackage, name, variant] = _name.split(':');
   const icon = useIconState(
-    (s) => s.packagesMap[iconPackage]?.icons[name]?.variants[variant]
+    useShallow(
+      (s) => s.packagesMap[iconPackage]?.icons[name]?.variants[variant]
+    )
   );
 
   const unicode = icon ? String.fromCodePoint(Number.parseInt(icon, 16)) : '';

src/frontend/src/components/items/DocTooltip.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro';
 import { Anchor, Container, HoverCard, ScrollArea, Text } from '@mantine/core';
-import { useEffect, useRef, useState } from 'react';
+import { type JSX, useEffect, useRef, useState } from 'react';
 
 import * as classes from '../../main.css';
 

src/frontend/src/components/items/LanguageSelect.tsx

@@ -1,15 +1,15 @@
 import { Select } from '@mantine/core';
 import { useEffect, useState } from 'react';
 
+import { useShallow } from 'zustand/react/shallow';
 import { getSupportedLanguages } from '../../contexts/LanguageContext';
 import { useLocalState } from '../../states/LocalState';
 
 export function LanguageSelect({ width = 80 }: Readonly<{ width?: number }>) {
   const [value, setValue] = useState<string | null>(null);
-  const [locale, setLanguage] = useLocalState((state) => [
-    state.language,
-    state.setLanguage
-  ]);
+  const [locale, setLanguage] = useLocalState(
+    useShallow((state) => [state.language, state.setLanguage])
+  );
   const [langOptions, setLangOptions] = useState<any[]>([]);
 
   // change global language on change

src/frontend/src/components/items/LanguageToggle.tsx

@@ -15,6 +15,7 @@ export function LanguageToggle() {
         margin: open === true ? 2 : 12,
         padding: open === true ? 8 : 0
       }}
+      aria-label='Open language options'
     >
       <ActionIcon
         onClick={() => toggle.toggle()}

src/frontend/src/components/items/MenuLinks.tsx

@@ -8,7 +8,7 @@ import {
   Tooltip,
   UnstyledButton
 } from '@mantine/core';
-import { useMemo } from 'react';
+import { type JSX, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { InvenTreeIcon, type InvenTreeIconType } from '../../functions/icons';

src/frontend/src/components/items/OnlyStaff.tsx

@@ -1,9 +1,10 @@
 import { Trans } from '@lingui/macro';
 
+import { useShallow } from 'zustand/react/shallow';
 import { useUserState } from '../../states/UserState';
 
 export const OnlyStaff = ({ children }: { children: any }) => {
-  const [user] = useUserState((state) => [state.user]);
+  const [user] = useUserState(useShallow((state) => [state.user]));
 
   if (user?.is_staff) return children;
   return <Trans>This information is only available for staff users</Trans>;