fix: click outside

Author: nusr

src/components/Menu/index.tsx

@@ -52,17 +52,16 @@ export const SubMenu: FunctionComponent<
       data-testid={testId}
     >
       <div>{label}</div>
-      {open && (
-        <div
-          className={classnames(
-            styles.subMenuContainer,
-            styles.portal,
-            portalClassName,
-          )}
-        >
-          <ul className={styles.menu}>{children}</ul>
-        </div>
-      )}
+      <div
+        className={classnames(
+          styles.subMenuContainer,
+          styles.portal,
+          portalClassName,
+        )}
+        hidden={!open}
+      >
+        <ul className={styles.menu}>{children}</ul>
+      </div>
     </li>
   );
 };

src/components/Select/index.tsx

@@ -10,6 +10,7 @@ import { OptionItem } from '../../types';
 import styles from './index.module.css';
 import { Icon } from '../BaseIcon';
 import { Button } from '../Button';
+import { useClickOutside } from '../../containers/hooks';
 
 export interface SelectProps {
   value?: string | number;
@@ -158,8 +159,12 @@ export const SelectList: FunctionComponent<
     },
     [onChange],
   );
+  const ref = useClickOutside(true, () => {
+    setActive(false);
+  });
   return (
     <div
+      ref={ref}
       className={classnames(styles['select-list-container'], className, {
         [styles.active]: active,
       })}

src/containers/SheetBar/index.tsx

@@ -9,6 +9,7 @@ import { Button, Icon, SelectPopup } from '../../components';
 import { SheetBarContextMenu } from './SheetBarContextMenu';
 import styles from './index.module.css';
 import { useCoreStore, useExcel } from '../../containers/store';
+import { useClickOutside } from '../hooks';
 
 export const SheetBarContainer: React.FunctionComponent<React.PropsWithChildren> =
   memo(({ children }) => {
@@ -66,9 +67,14 @@ export const SheetBarContainer: React.FunctionComponent<React.PropsWithChildren>
     const togglePopup = useCallback(() => {
       setPopupActive((v) => !v);
     }, []);
+
+    const ref = useClickOutside(popupActive, () => {
+      setPopupActive(false);
+    });
+
     return (
       <div className={styles['sheet-bar-wrapper']} data-testid="sheet-bar">
-        <div>
+        <div ref={ref}>
           <Button
             onClick={togglePopup}
             className={styles['menu-button']}

src/containers/ToolBar/Border.tsx

@@ -172,6 +172,7 @@ export const BorderToolBar = memo(() => {
     };
     record[type]();
   };
+
   return (
     <div className={styles['container']}>
       <Button