refactor: use strict

src/common/Menu/Menu.tsx

@@ -9,8 +9,8 @@ import styles from './styles.less';
 type Props = {
     children: JSX.Element,
     className: string,
-    shortcut: string,
-    position: MenuPosition,
+    shortcut?: string,
+    position?: MenuPosition,
 };
 
 const createId = () => (Math.random() + 1).toString(36).substring(7);
@@ -27,22 +27,23 @@ const Menu = ({ children, className, shortcut, position }: Props) => {
 
     useEffect(() => {
         const parent = element.current?.parentElement;
-        parent.addEventListener('click', onToggle);
-
-        menu.create({
-            id: id.current,
-            className,
-            parent,
-            position,
-        });
+        if (parent) {
+            parent.addEventListener('click', onToggle);
+            menu.create({
+                id: id.current,
+                className,
+                parent,
+                position,
+            });
+        }
 
         return () => {
-            parent.removeEventListener('click', onToggle);
+            parent && parent.removeEventListener('click', onToggle);
             menu.remove(id.current);
         };
     }, []);
 
-    useKeyboardEvent(shortcut, onToggle, !shortcut);
+    shortcut && useKeyboardEvent(shortcut, onToggle, !shortcut);
 
     return <>
         <div ref={element} className={styles['menu-placeholder']} />

src/common/Menu/MenuProvider.tsx

@@ -17,7 +17,7 @@ const MenuProvider = ({ children, className }: Props) => {
     const container = useRef<HTMLDivElement>(null);
 
     const [menus, setMenus] = useState<Menu[]>([]);
-    const [style, setStyle] = useState<React.CSSProperties>(null);
+    const [style, setStyle] = useState<React.CSSProperties>({});
 
     const active = useMemo(() => menus.find(({ open }) => open), [menus]);
 
@@ -36,7 +36,7 @@ const MenuProvider = ({ children, className }: Props) => {
     };
 
     const render = (content: JSX.Element) => {
-        return createPortal(content, container.current);
+        return container.current && createPortal(content, container.current);
     };
 
     const toggle = (id: string) => {
@@ -54,7 +54,7 @@ const MenuProvider = ({ children, className }: Props) => {
     };
 
     useLayoutEffect(() => {
-        setStyle(null);
+        setStyle({});
 
         if (container.current && active) {
             const menu = container.current.getBoundingClientRect();
@@ -71,7 +71,7 @@ const MenuProvider = ({ children, className }: Props) => {
     }, [active]);
 
     useKeyboardEvent('Escape', closeAll);
-    useOnClickOutside([container.current, active?.parent], closeAll);
+    useOnClickOutside(container.current && active?.parent ? [container.current, active.parent] : [], closeAll);
 
     return (
         <MenuContext.Provider value={{ active, create, remove, render, toggle }}>

src/common/Menu/types.d.ts

@@ -4,6 +4,6 @@ export type Menu = {
     id: string,
     className: string,
     parent: HTMLElement,
-    position: MenuPosition,
+    position?: MenuPosition,
     open: boolean,
 };

tsconfig.json

@@ -13,7 +13,7 @@
         "allowJs": true,
         "checkJs": false,
         "noEmit": false,
-        "strict": false
+        "strict": true
     },
     "include": [
         "./src",