feat: responsive popovers & menus (#1323)

packages/web/src/javascripts/Components/AccountMenu/AccountMenu.tsx

@@ -1,26 +1,24 @@
 import { observer } from 'mobx-react-lite'
-import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
 import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { WebApplication } from '@/Application/Application'
-import { useCallback, useRef, FunctionComponent, KeyboardEventHandler } from 'react'
+import { useCallback, FunctionComponent, KeyboardEventHandler } from 'react'
 import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { AccountMenuPane } from './AccountMenuPane'
 import MenuPaneSelector from './MenuPaneSelector'
 
-type Props = {
+export type AccountMenuProps = {
   viewControllerManager: ViewControllerManager
   application: WebApplication
   onClickOutside: () => void
   mainApplicationGroup: ApplicationGroup
 }
 
-const AccountMenu: FunctionComponent<Props> = ({
+const AccountMenu: FunctionComponent<AccountMenuProps> = ({
   application,
   viewControllerManager,
-  onClickOutside,
   mainApplicationGroup,
 }) => {
-  const { currentPane, shouldAnimateCloseMenu } = viewControllerManager.accountMenuController
+  const { currentPane } = viewControllerManager.accountMenuController
 
   const closeAccountMenu = useCallback(() => {
     viewControllerManager.accountMenuController.closeAccountMenu()
@@ -33,11 +31,6 @@ const AccountMenu: FunctionComponent<Props> = ({
     [viewControllerManager],
   )
 
-  const ref = useRef<HTMLDivElement>(null)
-  useCloseOnClickOutside(ref, () => {
-    onClickOutside()
-  })
-
   const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(
     (event) => {
       switch (event.key) {
@@ -56,22 +49,15 @@ const AccountMenu: FunctionComponent<Props> = ({
   )
 
   return (
-    <div ref={ref} id="account-menu" className="sn-component">
-      <div
-        className={`max-h-120 absolute bottom-full left-0 z-footer-bar-item-panel flex min-w-80 max-w-xs cursor-auto flex-col overflow-y-auto rounded bg-default py-2 shadow-main ${
-          shouldAnimateCloseMenu ? 'slide-up-animation' : 'slide-down-animation transition-transform duration-150'
-        }`}
-        onKeyDown={handleKeyDown}
-      >
-        <MenuPaneSelector
-          viewControllerManager={viewControllerManager}
-          application={application}
-          mainApplicationGroup={mainApplicationGroup}
-          menuPane={currentPane}
-          setMenuPane={setCurrentPane}
-          closeMenu={closeAccountMenu}
-        />
-      </div>
+    <div id="account-menu" className="sn-component" onKeyDown={handleKeyDown}>
+      <MenuPaneSelector
+        viewControllerManager={viewControllerManager}
+        application={application}
+        mainApplicationGroup={mainApplicationGroup}
+        menuPane={currentPane}
+        setMenuPane={setCurrentPane}
+        closeMenu={closeAccountMenu}
+      />
     </div>
   )
 }