chore: fix lint and test error

Author: boilund

packages/core/src/Menu/BaseMenu.tsx

@@ -391,63 +391,64 @@ export interface BaseItemWithSubmenuProps
   readonly hideSubmenu: VoidFunction
 }
 
-const BaseItemWithSubmenu: React.FunctionComponent<BaseItemWithSubmenuProps> =
-  ({
-    component,
-    submenuComponents,
-    disabled,
-    keyboardSelect,
-    align,
-    submenuVisible,
-    submenuArrowIndex,
-    hideAndBlurMenu,
-    hideSubmenu,
-  }) => {
-    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+const BaseItemWithSubmenu: React.FunctionComponent<
+  BaseItemWithSubmenuProps
+> = ({
+  component,
+  submenuComponents,
+  disabled,
+  keyboardSelect,
+  align,
+  submenuVisible,
+  submenuArrowIndex,
+  hideAndBlurMenu,
+  hideSubmenu,
+}) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
 
-    const [visible, show, hide] = useBoolean(false)
-    const [debouncedVisible, setDebouncedVisible] = useState(visible)
+  const [visible, show, hide] = useBoolean(false)
+  const [debouncedVisible, setDebouncedVisible] = useState(visible)
 
-    useEffect(() => {
-      const delayVisible = () => setDebouncedVisible(visible)
-      const delayed = setTimeout(delayVisible, SUBMENU_DELAY_MS)
-      return () => {
-        clearTimeout(delayed)
-      }
-    }, [visible])
+  useEffect(() => {
+    const delayVisible = () => setDebouncedVisible(visible)
+    const delayed = setTimeout(delayVisible, SUBMENU_DELAY_MS)
+    return () => {
+      clearTimeout(delayed)
+    }
+  }, [visible])
 
-    const preventMenuBlur = useCallback<PointerEventHandler>(e => {
-      // Prevent the menu from losing focus when clicking down on an item.
-      e.preventDefault()
-    }, [])
+  const preventMenuBlur = useCallback<PointerEventHandler>(e => {
+    // Prevent the menu from losing focus when clicking down on an item.
+    e.preventDefault()
+  }, [])
 
-    return (
-      <>
-        <BaseMenuItem
-          ref={setAnchorEl}
+  return (
+    <>
+      <BaseMenuItem
+        ref={setAnchorEl}
+        disabled={disabled}
+        keyboardSelect={keyboardSelect}
+        onPointerDown={preventMenuBlur}
+        onPointerOver={show}
+        onPointerOut={hide}
+      >
+        {component}
+      </BaseMenuItem>
+      {submenuComponents !== undefined && (
+        <Submenu
+          visible={submenuVisible || debouncedVisible}
+          submenuComponents={submenuComponents}
+          anchorEl={anchorEl}
           disabled={disabled}
-          keyboardSelect={keyboardSelect}
-          onPointerDown={preventMenuBlur}
-          onPointerOver={show}
-          onPointerOut={hide}
-        >
-          {component}
-        </BaseMenuItem>
-        {submenuComponents !== undefined && (
-          <Submenu
-            visible={submenuVisible || debouncedVisible}
-            submenuComponents={submenuComponents}
-            anchorEl={anchorEl}
-            disabled={disabled}
-            align={align}
-            arrowIndex={submenuArrowIndex}
-            hideAndBlurMenu={hideAndBlurMenu}
-            hideSubmenu={hideSubmenu}
-          />
-        )}
-      </>
-    )
-  }
+          align={align}
+          arrowIndex={submenuArrowIndex}
+          hideAndBlurMenu={hideAndBlurMenu}
+          hideSubmenu={hideSubmenu}
+        />
+      )}
+    </>
+  )
+}
 
 export interface BaseItemProps {
   readonly component: ReactNode

packages/core/src/Menu/__snapshots__/index.test.tsx.snap

@@ -1015,11 +1015,13 @@ exports[`Menus with submenu Menu (default) 1`] = `
   border: 2px solid transparent;
 }
 
-.c3:hover .c4 {
+.c3:hover .c4,
+.c3:focus-within .c4 {
   border: 0 solid transparent;
 }
 
-.c3:hover .c8 {
+.c3:hover .c8,
+.c3:focus-within .c8 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
@@ -1238,11 +1240,13 @@ exports[`Menus with submenu Menu (disabled) 1`] = `
   border: 2px solid transparent;
 }
 
-.c3:hover .c4 {
+.c3:hover .c4,
+.c3:focus-within .c4 {
   border: 0 solid transparent;
 }
 
-.c3:hover .c8 {
+.c3:hover .c8,
+.c3:focus-within .c8 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
@@ -1457,11 +1461,13 @@ exports[`Menus with submenu Menu (left) 1`] = `
   border: 2px solid transparent;
 }
 
-.c3:hover .c4 {
+.c3:hover .c4,
+.c3:focus-within .c4 {
   border: 0 solid transparent;
 }
 
-.c3:hover .c8 {
+.c3:hover .c8,
+.c3:focus-within .c8 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
@@ -1676,11 +1682,13 @@ exports[`Menus with submenu Menu (right) 1`] = `
   border: 2px solid transparent;
 }
 
-.c3:hover .c4 {
+.c3:hover .c4,
+.c3:focus-within .c4 {
   border: 0 solid transparent;
 }
 
-.c3:hover .c8 {
+.c3:hover .c8,
+.c3:focus-within .c8 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);