feat(ui): abstract out the global menu close trigger

This logic is moved into a hook.

This is needed for our context menus to close when the user clicks something in reactflow. It needed to be extended to support menus also.

invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx

@@ -4,7 +4,7 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { $flow } from 'features/nodes/store/reactFlowInstance';
-import { contextMenusClosed } from 'features/ui/store/uiSlice';
+import { bumpGlobalMenuCloseTrigger } from 'features/ui/store/uiSlice';
 import { MouseEvent, useCallback, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import {
@@ -153,7 +153,7 @@ export const Flow = () => {
   );
 
   const handlePaneClick = useCallback(() => {
-    dispatch(contextMenusClosed());
+    dispatch(bumpGlobalMenuCloseTrigger());
   }, [dispatch]);
 
   const onInit: OnInit = useCallback((flow) => {

invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx

@@ -15,7 +15,7 @@ import {
   NODE_WIDTH,
 } from 'features/nodes/types/constants';
 import { zNodeStatus } from 'features/nodes/types/invocation';
-import { contextMenusClosed } from 'features/ui/store/uiSlice';
+import { bumpGlobalMenuCloseTrigger } from 'features/ui/store/uiSlice';
 import {
   MouseEvent,
   PropsWithChildren,
@@ -70,7 +70,7 @@ const NodeWrapper = (props: NodeWrapperProps) => {
       if (!e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey) {
         dispatch(nodeExclusivelySelected(nodeId));
       }
-      dispatch(contextMenusClosed());
+      dispatch(bumpGlobalMenuCloseTrigger());
     },
     [dispatch, nodeId]
   );

invokeai/frontend/web/src/features/system/components/SiteHeader.tsx

@@ -6,6 +6,7 @@ import {
   MenuItem,
   MenuList,
   Spacer,
+  useDisclosure,
 } from '@chakra-ui/react';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { memo } from 'react';
@@ -24,9 +25,12 @@ import HotkeysModal from './HotkeysModal/HotkeysModal';
 import InvokeAILogoComponent from './InvokeAILogoComponent';
 import SettingsModal from './SettingsModal/SettingsModal';
 import StatusIndicator from './StatusIndicator';
+import { useGlobalMenuCloseTrigger } from 'common/hooks/useGlobalMenuCloseTrigger';
 
 const SiteHeader = () => {
   const { t } = useTranslation();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  useGlobalMenuCloseTrigger(onClose);
 
   const isBugLinkEnabled = useFeatureStatus('bugLink').isFeatureEnabled;
   const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled;
@@ -46,7 +50,7 @@ const SiteHeader = () => {
       <Spacer />
       <StatusIndicator />
 
-      <Menu>
+      <Menu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
         <MenuButton
           as={IAIIconButton}
           variant="link"

invokeai/frontend/web/src/features/ui/store/uiSlice.ts

@@ -16,7 +16,7 @@ export const initialUIState: UIState = {
   shouldShowEmbeddingPicker: false,
   shouldAutoChangeDimensions: false,
   favoriteSchedulers: [],
-  globalContextMenuCloseTrigger: 0,
+  globalMenuCloseTrigger: 0,
   panels: {},
 };
 
@@ -60,8 +60,8 @@ export const uiSlice = createSlice({
     setShouldAutoChangeDimensions: (state, action: PayloadAction<boolean>) => {
       state.shouldAutoChangeDimensions = action.payload;
     },
-    contextMenusClosed: (state) => {
-      state.globalContextMenuCloseTrigger += 1;
+    bumpGlobalMenuCloseTrigger: (state) => {
+      state.globalMenuCloseTrigger += 1;
     },
     panelsChanged: (
       state,
@@ -88,7 +88,7 @@ export const {
   favoriteSchedulersChanged,
   toggleEmbeddingPicker,
   setShouldAutoChangeDimensions,
-  contextMenusClosed,
+  bumpGlobalMenuCloseTrigger,
   panelsChanged,
 } = uiSlice.actions;
 

invokeai/frontend/web/src/features/ui/store/uiTypes.ts

@@ -24,6 +24,6 @@ export interface UIState {
   shouldShowEmbeddingPicker: boolean;
   shouldAutoChangeDimensions: boolean;
   favoriteSchedulers: ParameterScheduler[];
-  globalContextMenuCloseTrigger: number;
+  globalMenuCloseTrigger: number;
   panels: Record<string, string>;
 }