fix(deps): update dependency eslint-plugin-react-hooks to v5

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

@@ -49,6 +49,7 @@ export const BoardProvider = ({
 
   useEffect(() => {
     setReadySections((previous) => previous.filter((id) => data.sections.some((section) => section.id === id)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.sections.length, setReadySections]);
 
   const markAsReady = useCallback((id: string) => {

apps/nextjs/src/app/[locale]/manage/tools/api/components/api-keys.tsx

@@ -47,7 +47,7 @@ export const ApiKeysManagement = ({ apiKeys }: ApiKeysManagementProps) => {
         ),
       },
     ],
-    [],
+    [t],
   );
 
   const table = useMantineReactTable({

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-form.tsx

@@ -61,7 +61,7 @@ export const UserProfileForm = ({ user }: UserProfileFormProps) => {
         id: user.id,
       });
     },
-    [user.id, mutate],
+    [isProviderCredentials, mutate, user.id],
   );
 
   return (

apps/nextjs/src/components/board/items/item-move-modal.tsx

@@ -8,7 +8,6 @@ import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { z } from "@homarr/validation";
 
 import type { Item } from "~/app/[locale]/boards/_types";
-import { useItemActions } from "./item-actions";
 
 interface InnerProps {
   gridStack: GridStack;
@@ -21,7 +20,6 @@ export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) =
   const t = useI18n();
   // Keep track of the maximum width based on the x offset
   const maxWidthRef = useRef(innerProps.columnCount - innerProps.item.xOffset);
-  const { moveAndResizeItem } = useItemActions();
   const form = useZodForm(
     z.object({
       xOffset: z
@@ -62,7 +60,7 @@ export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) =
       });
       actions.closeModal();
     },
-    [moveAndResizeItem],
+    [actions, innerProps.gridStack, innerProps.item.id],
   );
 
   return (

apps/nextjs/src/components/board/sections/gridstack/gridstack-item.tsx

@@ -39,7 +39,7 @@ export const GridStackItem = ({
     if (type !== "section") return;
     innerRef.current.gridstackNode.minW = minWidth;
     innerRef.current.gridstackNode.minH = minHeight;
-  }, [minWidth, minHeight, innerRef]);
+  }, [minWidth, minHeight, innerRef, type]);
 
   return (
     <Box

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

@@ -215,6 +215,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
     }
 
     // Only run this effect when the section items change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [itemIds.length, columnCount]);
 
   /**

apps/nextjs/src/components/user-avatar-menu.tsx

@@ -58,7 +58,7 @@ export const UserAvatarMenu = ({ children }: UserAvatarMenuProps) => {
         router.refresh();
       },
     });
-  }, [openModal, router]);
+  }, [logoutUrl, openModal, router]);
 
   return (
     <Menu width={300} withArrow withinPortal>

packages/modals/src/confirm-modal.tsx

@@ -53,7 +53,7 @@ export const ConfirmModal = createModal<Omit<ConfirmModalProps, "title">>(({ act
         actions.closeModal();
       }
     },
-    [cancelProps?.onClick, onCancel, actions.closeModal],
+    [cancelProps, onCancel, closeOnCancel, actions],
   );
 
   const handleConfirm = useCallback(
@@ -73,7 +73,7 @@ export const ConfirmModal = createModal<Omit<ConfirmModalProps, "title">>(({ act
       }
       setLoading(false);
     },
-    [confirmProps?.onClick, onConfirm, actions.closeModal],
+    [confirmProps, onConfirm, closeOnConfirm, actions],
   );
 
   return (

packages/modals/src/index.tsx

@@ -38,7 +38,7 @@ export const ModalProvider = ({ children }: PropsWithChildren) => {
     (id: string, canceled?: boolean) => {
       dispatch({ type: "CLOSE", modalId: id, canceled });
     },
-    [stateRef, dispatch],
+    [dispatch],
   );
 
   const openModalInner: ModalContextProps["openModalInner"] = useCallback(
@@ -63,10 +63,7 @@ export const ModalProvider = ({ children }: PropsWithChildren) => {
     [dispatch],
   );
 
-  const handleCloseModal = useCallback(
-    () => state.current && closeModal(state.current.id),
-    [closeModal, state.current?.id],
-  );
+  const handleCloseModal = useCallback(() => state.current && closeModal(state.current.id), [closeModal, state]);
 
   const activeModals = state.modals.filter((modal) => modal.id === state.current?.id || modal.props.keepMounted);
 

packages/spotlight/src/components/actions/items/children-action-item.tsx

@@ -24,7 +24,7 @@ export const ChildrenActionItem = ({ childrenOptions, action, query }: ChildrenA
 
   return (
     <Spotlight.Action renderRoot={renderRoot} onClick={onClick} className={classes.spotlightAction}>
-      <action.component {...childrenOptions.option} />
+      <action.Component {...childrenOptions.option} />
     </Spotlight.Action>
   );
 };

packages/spotlight/src/components/actions/items/group-action-item.tsx

@@ -48,7 +48,7 @@ export const SpotlightGroupActionItem = <TOption extends Record<string, unknown>
       closeSpotlightOnTrigger={interaction.type !== "mode" && interaction.type !== "children"}
       className={classes.spotlightAction}
     >
-      <group.component {...option} />
+      <group.Component {...option} />
     </Spotlight.Action>
   );
 };

packages/spotlight/src/components/spotlight.tsx

@@ -92,7 +92,7 @@ export const Spotlight = () => {
 
       {childrenOptions ? (
         <Group>
-          <childrenOptions.detailComponent options={childrenOptions.option as never} />
+          <childrenOptions.DetailComponent options={childrenOptions.option as never} />
         </Group>
       ) : null}
 

packages/spotlight/src/lib/children.ts

@@ -3,13 +3,13 @@ import type { ReactNode } from "react";
 import type { inferSearchInteractionDefinition } from "./interaction";
 
 export interface CreateChildrenOptionsProps<TParentOptions extends Record<string, unknown>> {
-  detailComponent: ({ options }: { options: TParentOptions }) => ReactNode;
+  DetailComponent: ({ options }: { options: TParentOptions }) => ReactNode;
   useActions: (options: TParentOptions, query: string) => ChildrenAction<TParentOptions>[];
 }
 
 export interface ChildrenAction<TParentOptions extends Record<string, unknown>> {
   key: string;
-  component: (option: TParentOptions) => JSX.Element;
+  Component: (option: TParentOptions) => JSX.Element;
   useInteraction: (option: TParentOptions, query: string) => inferSearchInteractionDefinition<"link" | "javaScript">;
   hide?: boolean | ((option: TParentOptions) => boolean);
 }

packages/spotlight/src/lib/group.ts

@@ -8,7 +8,7 @@ type CommonSearchGroup<TOption extends Record<string, unknown>, TOptionProps ext
   // key path is used to define the path to a unique key in the option object
   keyPath: keyof TOption;
   title: stringOrTranslation;
-  component: (option: TOption) => JSX.Element;
+  Component: (option: TOption) => JSX.Element;
   useInteraction: (option: TOption, query: string) => inferSearchInteractionDefinition<SearchInteraction>;
   onKeyDown?: (
     event: KeyboardEvent,

packages/spotlight/src/lib/interaction.ts

@@ -16,7 +16,7 @@ const searchInteractions = [
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     useActions: CreateChildrenOptionsProps<any>["useActions"];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    detailComponent: CreateChildrenOptionsProps<any>["detailComponent"];
+    DetailComponent: CreateChildrenOptionsProps<any>["DetailComponent"];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     option: any;
   }>(),

packages/spotlight/src/modes/app-integration-board/apps-search-group.tsx

@@ -16,7 +16,7 @@ const appChildrenOptions = createChildrenOptions<App>({
   useActions: () => [
     {
       key: "open",
-      component: () => {
+      Component: () => {
         const t = useI18n();
 
         return (
@@ -34,7 +34,7 @@ const appChildrenOptions = createChildrenOptions<App>({
     },
     {
       key: "edit",
-      component: () => {
+      Component: () => {
         const t = useI18n();
 
         return (
@@ -47,7 +47,7 @@ const appChildrenOptions = createChildrenOptions<App>({
       useInteraction: interaction.link(({ id }) => ({ href: `/manage/apps/edit/${id}` })),
     },
   ],
-  detailComponent: ({ options }) => {
+  DetailComponent: ({ options }) => {
     const t = useI18n();
 
     return (
@@ -75,7 +75,7 @@ const appChildrenOptions = createChildrenOptions<App>({
 export const appsSearchGroup = createGroup<App>({
   keyPath: "id",
   title: (t) => t("search.mode.appIntegrationBoard.group.app.title"),
-  component: (app) => (
+  Component: (app) => (
     <Group px="md" py="sm">
       <Avatar
         size="sm"

packages/spotlight/src/modes/app-integration-board/boards-search-group.tsx

@@ -23,7 +23,7 @@ const boardChildrenOptions = createChildrenOptions<Board>({
     const actions: (ChildrenAction<Board> & { hidden?: boolean })[] = [
       {
         key: "open",
-        component: () => {
+        Component: () => {
           const t = useI18n();
 
           return (
@@ -37,7 +37,7 @@ const boardChildrenOptions = createChildrenOptions<Board>({
       },
       {
         key: "homeBoard",
-        component: () => {
+        Component: () => {
           const t = useI18n();
 
           return (
@@ -61,7 +61,7 @@ const boardChildrenOptions = createChildrenOptions<Board>({
       },
       {
         key: "settings",
-        component: () => {
+        Component: () => {
           const t = useI18n();
 
           return (
@@ -78,7 +78,7 @@ const boardChildrenOptions = createChildrenOptions<Board>({
 
     return actions;
   },
-  detailComponent: ({ options: board }) => {
+  DetailComponent: ({ options: board }) => {
     const t = useI18n();
 
     return (
@@ -102,7 +102,7 @@ const boardChildrenOptions = createChildrenOptions<Board>({
 export const boardsSearchGroup = createGroup<Board>({
   keyPath: "id",
   title: "Boards",
-  component: (board) => (
+  Component: (board) => (
     <Group px="md" py="sm">
       {board.logoImageUrl ? (
         <img src={board.logoImageUrl} alt={board.name} width={24} height={24} />

packages/spotlight/src/modes/app-integration-board/integrations-search-group.tsx

@@ -10,7 +10,7 @@ import { interaction } from "../../lib/interaction";
 export const integrationsSearchGroup = createGroup<{ id: string; kind: IntegrationKind; name: string }>({
   keyPath: "id",
   title: (t) => t("search.mode.appIntegrationBoard.group.integration.title"),
-  component: (integration) => (
+  Component: (integration) => (
     <Group px="md" py="sm">
       <IntegrationAvatar size="sm" kind={integration.kind} />
 

packages/spotlight/src/modes/command/children/language.tsx

@@ -30,7 +30,7 @@ export const languageChildrenOptions = createChildrenOptions<Record<string, unkn
       )
       .map(({ localeKey, attributes }) => ({
         key: localeKey,
-        component() {
+        Component() {
           return (
             <Group mx="md" my="sm" wrap="nowrap" justify="space-between" w="100%">
               <Group wrap="nowrap">
@@ -53,7 +53,7 @@ export const languageChildrenOptions = createChildrenOptions<Record<string, unkn
         },
       }));
   },
-  detailComponent: () => {
+  DetailComponent: () => {
     const t = useI18n();
 
     return (

packages/spotlight/src/modes/command/children/new-integration.tsx

@@ -20,7 +20,7 @@ export const newIntegrationChildrenOptions = createChildrenOptions<Record<string
       )
       .map(([kind, integrationDef]) => ({
         key: kind,
-        component() {
+        Component() {
           return (
             <Group mx="md" my="sm" wrap="nowrap" w="100%">
               <IntegrationAvatar kind={kind} size="sm" />
@@ -31,7 +31,7 @@ export const newIntegrationChildrenOptions = createChildrenOptions<Record<string
         useInteraction: interaction.link(() => ({ href: `/manage/integrations/new?kind=${kind}` })),
       }));
   },
-  detailComponent() {
+  DetailComponent() {
     const t = useI18n();
 
     return (

packages/spotlight/src/modes/command/index.tsx

@@ -44,7 +44,7 @@ export const commandMode = {
       keyPath: "commandKey",
       title: "Global commands",
       useInteraction: (option, query) => option.useInteraction(option, query),
-      component: ({ icon: Icon, name }) => (
+      Component: ({ icon: Icon, name }) => (
         <Group px="md" py="sm">
           <Icon stroke={1.5} />
           <Text>{name}</Text>

packages/spotlight/src/modes/external/search-engines-search-group.tsx

@@ -15,7 +15,7 @@ export const searchEnginesChildrenOptions = createChildrenOptions<SearchEngine>(
   useActions: () => [
     {
       key: "search",
-      component: ({ name }) => {
+      Component: ({ name }) => {
         const tChildren = useScopedI18n("search.mode.external.group.searchEngine.children");
 
         return (
@@ -30,7 +30,7 @@ export const searchEnginesChildrenOptions = createChildrenOptions<SearchEngine>(
       })),
     },
   ],
-  detailComponent({ options }) {
+  DetailComponent({ options }) {
     const tChildren = useScopedI18n("search.mode.external.group.searchEngine.children");
     return (
       <Stack mx="md" my="sm">
@@ -47,7 +47,7 @@ export const searchEnginesChildrenOptions = createChildrenOptions<SearchEngine>(
 export const searchEnginesSearchGroups = createGroup<SearchEngine>({
   keyPath: "short",
   title: (t) => t("search.mode.external.group.searchEngine.title"),
-  component: ({ iconUrl, name, short, description }) => {
+  Component: ({ iconUrl, name, short, description }) => {
     return (
       <Group w="100%" wrap="nowrap" justify="space-between" align="center" px="md" py="xs">
         <Group wrap="nowrap">

packages/spotlight/src/modes/index.tsx

@@ -22,7 +22,7 @@ const helpMode = {
       keyPath: "character",
       title: (t) => t("search.mode.help.group.mode.title"),
       options: searchModesWithoutHelp.map(({ character, modeKey }) => ({ character, modeKey })),
-      component: ({ modeKey, character }) => {
+      Component: ({ modeKey, character }) => {
         const t = useScopedI18n(`search.mode.${modeKey}`);
 
         return (
@@ -59,7 +59,7 @@ const helpMode = {
           },
         ];
       },
-      component: (props) => (
+      Component: (props) => (
         <Group px="md" py="xs" w="100%" wrap="nowrap" align="center">
           <props.icon />
           <Text>{props.label}</Text>

packages/spotlight/src/modes/page/pages-search-group.tsx

@@ -29,7 +29,7 @@ export const pagesSearchGroup = createGroup<{
 }>({
   keyPath: "path",
   title: (t) => t("search.mode.page.group.page.title"),
-  component: ({ name, icon: Icon }) => (
+  Component: ({ name, icon: Icon }) => (
     <Group px="md" py="sm">
       <Icon stroke={1.5} />
       <Text>{name}</Text>