feat(core): added code to handle keyboard inputs (#4006)

Co-authored-by: Alex Yang <himself65@outlook.com>

packages/component/src/ui/menu/menu-item.tsx

@@ -15,6 +15,7 @@ export type IconMenuProps = PropsWithChildren<{
   disabled?: boolean;
   active?: boolean;
   disableHover?: boolean;
+  userFocused?: boolean;
   gap?: string;
   fontSize?: string;
 }> &

packages/component/src/ui/menu/styles.ts

@@ -62,11 +62,13 @@ export const StyledMenuItem = styled('button')<{
   disabled?: boolean;
   active?: boolean;
   disableHover?: boolean;
+  userFocused?: boolean;
 }>(({
   isDir = false,
   disabled = false,
   active = false,
   disableHover = false,
+  userFocused = false,
 }) => {
   return {
     width: '100%',
@@ -99,7 +101,11 @@ export const StyledMenuItem = styled('button')<{
         : {
             backgroundColor: 'var(--affine-hover-color)',
           },
-
+    ...(userFocused && !disabled
+      ? {
+          backgroundColor: 'var(--affine-hover-color)',
+        }
+      : {}),
     ...(active && !disabled
       ? {
           backgroundColor: 'var(--affine-hover-color)',