Fix Mantine v9 CI failures for typecheck, lint, and e2e.

Align form generics with v9 TransformedValues typing, merge element-size refs for gridstack, and tighten selectors and lint fixes from the migration.

apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx

@@ -9,7 +9,7 @@ import { z } from "zod/v4";
 
 import { signIn } from "@homarr/auth/client";
 import { revalidatePathActionAsync } from "@homarr/common/client";
-import type { useForm } from "@homarr/form";
+import type { UseFormReturnType } from "@homarr/form";
 import { useZodForm } from "@homarr/form";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -162,7 +162,7 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c
 
 interface SubmitButtonProps {
   isPending: boolean;
-  form: ReturnType<typeof useForm<FormType, (values: FormType) => FormType>>;
+  form: UseFormReturnType<FormType>;
   provider: "credentials" | "ldap";
 }
 

apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-segmented-control.tsx

@@ -12,7 +12,7 @@ interface FormType {
 interface SecretKindsSegmentedControlProps<TFormType extends FormType> {
   defaultKinds?: IntegrationSecretKind[];
   secretKinds: IntegrationSecretKind[][];
-  form: UseFormReturnType<TFormType, (values: TFormType) => TFormType>;
+  form: UseFormReturnType<TFormType, TFormType>;
 }
 
 export const SecretKindsSegmentedControl = <TFormType extends FormType>({

apps/nextjs/src/app/[locale]/manage/settings/_components/setting-switch.tsx

@@ -15,7 +15,7 @@ export const SwitchSetting = <TFormValue extends Record<string, boolean>>({
   disabled,
 }: {
   form: Modify<
-    UseFormReturnType<TFormValue, () => TFormValue>,
+    UseFormReturnType<TFormValue, TFormValue>,
     {
       setFieldValue: (key: keyof TFormValue, value: (previous: boolean) => boolean) => void;
     }

apps/nextjs/src/app/[locale]/manage/tools/logs/level-selection.tsx

@@ -2,12 +2,14 @@
 
 import { Select } from "@mantine/core";
 
-import type { LogLevel } from "@homarr/core/infrastructure/logs/constants";
 import { logLevelConfiguration, logLevels } from "@homarr/core/infrastructure/logs/constants";
+import type { LogLevel } from "@homarr/core/infrastructure/logs/constants";
 import { useI18n } from "@homarr/translation/client";
 
 import { useLogContext } from "./log-context";
 
+const levelByValue = Object.fromEntries(logLevels.map((logLevel) => [logLevel, logLevel])) as Record<string, LogLevel>;
+
 export const LogLevelSelection = () => {
   const { level, setLevel } = useLogContext();
   const t = useI18n();
@@ -19,7 +21,12 @@ export const LogLevelSelection = () => {
         label: `${logLevelConfiguration[level].prefix} ${t(`log.level.option.${level}`)}`,
       }))}
       value={level}
-      onChange={(value) => setLevel(value as LogLevel)}
+      onChange={(value) => {
+        const nextLevel = value && levelByValue[value];
+        if (nextLevel) {
+          setLevel(nextLevel);
+        }
+      }}
       checkIconPosition="right"
     />
   );

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_first-day-of-week.tsx

@@ -62,7 +62,7 @@ export const FirstDayOfWeek = ({ user }: FirstDayOfWeekProps) => {
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack gap="md">
-        <Radio.Group {...inputProps} value={value} onChange={(value) => onChange(parseInt(value))}>
+        <Radio.Group {...inputProps} value={value} onChange={(nextValue: string) => onChange(parseInt(nextValue, 10))}>
           <Group mt="xs">
             <Radio value="1" label={weekDays[1]} />
             <Radio value="6" label={weekDays[6]} />

apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts

@@ -1,6 +1,6 @@
-import type { RefObject } from "react";
+import type { Ref, RefObject } from "react";
 import { createRef, useCallback, useEffect, useRef } from "react";
-import { useElementSize } from "@mantine/hooks";
+import { useElementSize, useMergedRef } from "@mantine/hooks";
 
 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
@@ -13,7 +13,7 @@ import { useSectionActions } from "../section-actions";
 import { initializeGridstack } from "./init-gridstack";
 
 export interface UseGridstackRefs {
-  wrapper: RefObject<HTMLDivElement | null>;
+  wrapper: Ref<HTMLDivElement | null>;
   items: RefObject<Record<string, RefObject<GridItemHTMLElement | null>>>;
   gridstack: RefObject<GridStack | null>;
 }
@@ -59,8 +59,9 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
   const { moveAndResizeItem, moveItemToSection } = useItemActions();
   const { moveAndResizeInnerSection, moveInnerSectionToSection } = useSectionActions();
 
-  // define reference for wrapper - is used to calculate the width of the wrapper
-  const { ref: wrapperRef, width, height } = useElementSize<HTMLDivElement>();
+  const wrapperElementRef = useRef<HTMLDivElement | null>(null);
+  const { ref: measureWrapperRef, width, height } = useElementSize<HTMLDivElement>();
+  const wrapperRef = useMergedRef(measureWrapperRef, wrapperElementRef);
   // references to the diffrent items contained in the gridstack
   const itemRefs = useRef<Record<string, RefObject<GridItemHTMLElement | null>>>({});
   // reference of the gridstack object for modifications after initialization
@@ -193,7 +194,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
       itemIds,
       refs: {
         items: itemRefs,
-        wrapper: wrapperRef,
+        wrapper: wrapperElementRef,
         gridstack: gridRef,
       },
       sectionColumnCount: columnCount,
@@ -276,7 +277,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
   useCssVariableConfiguration({
     columnCount,
     gridRef,
-    wrapperRef,
+    wrapperRef: wrapperElementRef,
     width,
     height,
     isDynamic: section.kind === "dynamic",
@@ -293,7 +294,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
 
 interface UseCssVariableConfiguration {
   gridRef: UseGridstackRefs["gridstack"];
-  wrapperRef: UseGridstackRefs["wrapper"];
+  wrapperRef: RefObject<HTMLDivElement | null>;
   width: number;
   height: number;
   columnCount: number;

e2e/lldap.spec.ts

@@ -45,7 +45,7 @@ describe("LLDAP authorization", () => {
     // Act
     await page.goto(`http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}/auth/login`);
     await page.getByLabel("Username").fill(defaultCredentials.username);
-    await page.getByLabel("Password").fill(defaultCredentials.password);
+    await page.locator("#password").fill(defaultCredentials.password);
     await page.locator("css=button[type='submit']").click();
 
     // Assert

packages/widgets/src/_inputs/widget-dynamic-select-input.tsx

@@ -25,9 +25,22 @@ export const WidgetDynamicSelectInput = ({ property, kind, options }: CommonWidg
   const [search, setSearch] = useState("");
   const [debouncedSearch] = useDebouncedValue(search, 300);
   const { isPending, options: selectOptions } = options.useOptions(debouncedSearch, form.values.integrationIds);
-  const value = inputProps.value as DynamicSelectOption | null;
+  const currentOption = inputProps.value as DynamicSelectOption | null;
   const onChange = inputProps.onChange as (value: DynamicSelectOption | null) => void;
 
+  const getLabelForValue = (selectedValue: string) => {
+    const matched = selectOptions.find((option) =>
+      typeof option === "string" ? option === selectedValue : option.value === selectedValue,
+    );
+    if (!matched) {
+      return selectedValue;
+    }
+    if (typeof matched === "string") {
+      return matched;
+    }
+    return translateIfNecessary(t, matched.label) ?? selectedValue;
+  };
+
   return (
     <Select
       label={tWidget("label")}
@@ -41,14 +54,15 @@ export const WidgetDynamicSelectInput = ({ property, kind, options }: CommonWidg
               },
         )
         .concat(
-          typeof value === "object" &&
-            value !== null &&
+          currentOption !== null &&
             !selectOptions.some((option) =>
-              typeof option === "string" ? option === value.value : option.value === value.value,
+              typeof option === "string"
+                ? option === currentOption.value
+                : option.value === currentOption.value,
             )
             ? {
-                value: value.value,
-                label: value.label,
+                value: currentOption.value,
+                label: currentOption.label,
               }
             : [],
         )}
@@ -74,19 +88,17 @@ export const WidgetDynamicSelectInput = ({ property, kind, options }: CommonWidg
       description={options.withDescription ? tWidget("description") : undefined}
       searchable
       {...inputProps}
-      value={value?.value ?? null}
-      onChange={(value) =>
-        onChange(
-          value
-            ? {
-                value,
-                label:
-                  selectOptions.filter((option) => typeof option === "object").find((option) => option.value === value)
-                    ?.label ?? value,
-              }
-            : null,
-        )
-      }
+      value={currentOption === null ? null : currentOption.value}
+      onChange={(selectedValue: string | null) => {
+        if (selectedValue === null) {
+          onChange(null);
+          return;
+        }
+        onChange({
+          value: selectedValue,
+          label: getLabelForValue(selectedValue),
+        });
+      }}
     />
   );
 };

packages/widgets/src/_inputs/widget-select-input.tsx

@@ -53,7 +53,7 @@ export const WidgetSelectInput = ({ property, kind, options }: CommonWidgetInput
       )}
       leftSection={CurrentIcon && <CurrentIcon size={16} stroke={1.5} />}
       renderOption={({ option, checked }) => {
-        const Icon = getIconFor(options.options, option.value);
+        const Icon = getIconFor(options.options, String(option.value));
 
         return (
           <Group flex="1" gap="xs">

packages/widgets/src/media-transcoding/component.tsx

@@ -17,6 +17,8 @@ import { WorkersPanel } from "./panels/workers.panel";
 
 type View = (typeof views)[number];
 
+const viewBySegmentValue = Object.fromEntries(views.map((view) => [view, view])) as Record<string, View>;
+
 const viewIcons = {
   workers: IconCpu2,
   queue: IconClipboardList,
@@ -83,7 +85,12 @@ export default function MediaTranscodingWidget({
             };
           })}
           value={view}
-          onChange={(value) => setView(value as View)}
+          onChange={(value) => {
+            const nextView = viewBySegmentValue[value];
+            if (nextView) {
+              setView(nextView);
+            }
+          }}
           size="xs"
         />