chore(deps): update mantine monorepo to v9 (#5411)

Co-authored-by: Thomas Camlong <thomas@ajnart.fr>

apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx

@@ -23,6 +23,7 @@ export const CustomMantineProvider = ({
         theme={createTheme({
           primaryColor: "red",
           autoContrast: true,
+          defaultRadius: "sm",
         })}
       >
         {children}

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";
 }
 
@@ -198,7 +198,7 @@ const PasswordForgottenCollapse = ({ username }: PasswordForgottenCollapseProps)
         {tForgotPassword("label")}
       </Anchor>
 
-      <Collapse in={visible}>
+      <Collapse expanded={visible}>
         <Card>
           <Stack gap="xs">
             <Text size="sm">{tForgotPassword("description")}</Text>

apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx

@@ -24,6 +24,7 @@ export const BoardMantineProvider = ({
     },
     primaryColor: "primaryColor",
     autoContrast: true,
+    defaultRadius: "sm",
     fontSizes: {
       "2xl": rem(24),
       "3xl": rem(28),

apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx

@@ -83,7 +83,7 @@ export const ColorSettingsContent = ({ board }: Props) => {
             <Anchor onClick={toggle}>{showPreview ? t("common.preview.hide") : t("common.preview.show")}</Anchor>
           </Grid.Col>
           <Grid.Col span={12}>
-            <Collapse in={showPreview}>
+            <Collapse expanded={showPreview}>
               <Stack>
                 <ColorsPreview previewColor={form.values.primaryColor} />
                 <ColorsPreview previewColor={form.values.secondaryColor} />

apps/nextjs/src/app/[locale]/layout.tsx

@@ -142,7 +142,7 @@ export default async function Layout(props: {
       </head>
       <body className={["font-sans", fontSans.variable].join(" ")}>
         <StackedProvider>
-          <Notifications />
+          <Notifications pauseResetOnHover="notification" />
           <ServiceWorkerRegistration />
           {props.children}
         </StackedProvider>

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

@@ -79,7 +79,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
             </Button>
           </Group>
         </Group>
-        <Collapse in={editMode}>{children}</Collapse>
+        <Collapse expanded={editMode}>{children}</Collapse>
       </Stack>
     </Card>
   );

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/integrations/new/_integration-new-form.tsx

@@ -226,7 +226,7 @@ const AppForm = ({ form, canCreateApps }: { form: UseFormReturnType<FormType>; c
         description={t("integration.field.createApp.description")}
       />
 
-      <Collapse in={form.values.hasApp}>
+      <Collapse expanded={form.values.hasApp}>
         <Fieldset legend={t("integration.field.app.sectionTitle")}>
           <Stack gap="sm">
             {canCreateApps && (

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/category-section.tsx

@@ -62,7 +62,7 @@ export const BoardCategorySection = ({ section }: Props) => {
           </UnstyledButton>
           <CategoryMenu category={section} />
         </Group>
-        <Collapse in={opened} p="sm" pt={0}>
+        <Collapse expanded={opened} p="sm" pt={0}>
           <GridStack section={section} />
         </Collapse>
       </Stack>

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;