fix(window-level-action-menu): Window level menu no longer needs two clicks to open after it is used (#5711)

The window level menu's logic for when it is opened and closed now also runs when the AllInOneMenu triggers the open or close.
Using refs to store the latest function references in the AllInOneMenu component to avoid triggering a useEffect when the functions change.
Removed an unused element prop from the WindowLevelActionMenu component.

extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevelActionMenu.tsx

@@ -11,22 +11,23 @@ import i18n from 'i18next';
 
 export type WindowLevelActionMenuProps = {
   viewportId: string;
-  element?: HTMLElement;
   align?: 'start' | 'end' | 'center';
   side?: 'top' | 'bottom' | 'left' | 'right';
+  onVisibilityChange?: (isVisible: boolean) => void;
 };
 
 export function WindowLevelActionMenu({
   viewportId,
-  element,
   align,
   side,
+  onVisibilityChange,
 }: WindowLevelActionMenuProps): ReactElement {
   return (
     <WindowLevelActionMenuContent
       viewportId={viewportId}
       align={align}
       side={side}
+      onVisibilityChange={onVisibilityChange}
     />
   );
 }
@@ -35,10 +36,12 @@ export function WindowLevelActionMenuContent({
   viewportId,
   align,
   side,
+  onVisibilityChange,
 }: {
   viewportId: string;
   align?: string;
   side?: string;
+  onVisibilityChange?: (isVisible: boolean) => void;
 }): ReactElement {
   const { t } = useTranslation('WindowLevelActionMenu');
   // Use a stable key for the menu to avoid infinite re-renders
@@ -60,6 +63,7 @@ export function WindowLevelActionMenuContent({
       align={align}
       side={side}
       backLabel={i18n.t('WindowLevelActionMenu:Back to Display Options')}
+      onVisibilityChange={onVisibilityChange}
     >
       <AllInOneMenu.ItemPanel>
         {!is3DVolume && <Colorbar viewportId={viewportId} />}

extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevelActionMenuWrapper.tsx

@@ -16,7 +16,6 @@ import { useViewportRendering } from '../../hooks';
 export function WindowLevelActionMenuWrapper(
   props: withAppTypes<{
     viewportId: string;
-    element?: HTMLElement;
     location?: number;
     isOpen?: boolean;
     onOpen?: () => void;
@@ -28,7 +27,6 @@ export function WindowLevelActionMenuWrapper(
 ): ReactNode {
   const {
     viewportId,
-    element,
     location,
     isOpen = false,
     onOpen,
@@ -123,9 +121,9 @@ export function WindowLevelActionMenuWrapper(
       >
         <WindowLevelActionMenu
           viewportId={viewportIdToUse}
-          element={element}
           align={align}
           side={side}
+          onVisibilityChange={handleOpenChange}
         />
       </PopoverContent>
     </Popover>