Use "mantine/hooks"

src/modules/core/components/AppbarSearch.tsx

@@ -6,13 +6,14 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import SearchIcon from '@mui/icons-material/Search';
 import IconButton from '@mui/material/IconButton';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { SearchTextField } from '@/modules/core/components/inputs/SearchTextField.tsx';
 
@@ -75,20 +76,13 @@ export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
         if (!searchString) updateSearchOpenState(false);
     };
 
-    const handleKeyboardEvent = (e: KeyboardEvent) => {
-        if (e.key === 'F3' || (e.ctrlKey && e.key === 'f')) {
-            e.preventDefault();
+    useHotkeys(
+        'ctrl+f, F3',
+        () => {
             updateSearchOpenState(true);
-        }
-    };
-
-    useEffect(() => {
-        window.addEventListener('keydown', handleKeyboardEvent);
-
-        return () => {
-            window.removeEventListener('keydown', handleKeyboardEvent);
-        };
-    }, [handleKeyboardEvent]);
+        },
+        { preventDefault: true },
+    );
 
     if (isOpen) {
         return (

src/modules/core/components/menu/NestedMenuItem.tsx

@@ -23,10 +23,8 @@ import {
     MouseEvent,
     ReactNode,
     RefAttributes,
-    useImperativeHandle,
     useRef,
     useState,
-    Ref,
 } from 'react';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
@@ -34,6 +32,7 @@ import Box from '@mui/material/Box';
 
 import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { SvgIconTypeMap } from '@mui/material/SvgIcon';
+import { useMergedRef } from '@mantine/hooks';
 import { IconMenuItem } from '@/modules/core/components/menu/IconMenuItem.tsx';
 import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
@@ -74,10 +73,10 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
     const { ref: containerRefProp, ...ContainerProps } = ContainerPropsProp;
 
     const menuItemRef = useRef<HTMLLIElement | null>(null);
-    useImperativeHandle(ref, () => menuItemRef.current!);
+    const mergedMenuItemRef = useMergedRef(ref, menuItemRef);
 
     const containerRef = useRef<HTMLElement>(null);
-    useImperativeHandle(containerRefProp as Ref<HTMLElement | null>, () => containerRef.current as HTMLElement);
+    const mergedContainerRef = useMergedRef(containerRefProp, containerRef);
 
     const menuContainerRef = useRef<HTMLDivElement | null>(null);
 
@@ -184,7 +183,7 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
     return (
         <Box
             {...ContainerProps}
-            ref={containerRef}
+            ref={mergedContainerRef}
             onFocus={handleFocus}
             onClick={handleClick}
             tabIndex={tabIndex}
@@ -195,7 +194,7 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
             <IconMenuItem
                 MenuItemProps={MenuItemProps}
                 className={className}
-                ref={menuItemRef}
+                ref={mergedMenuItemRef}
                 LeftIcon={LeftIcon}
                 RightIcon={RightIcon}
                 label={label}