Refactor DropdownMenu to support anchor-based positioning and update its usage in dependent components

- dropdowns 'invocation count' and 'more' should not be shown through css positioning, but programmatic. Then observe if the dropdown doesn't go out of viewport, if it does, it should be moved up the amount of pixels to fit it back in. Make sure the dropdowns are not full width.
- give better name for the component `packages/ui/src/components/editor/panel/prompts/PromptField/components/ProgrammaticDropdown.tsx`
- 'anchored dropdown' correctly appears above footer, but 'edit formats' dropdown does not.
- the dropdown 'prompt types' should have exactly the same width as the button triggering its appearance
- integrate 'anchored menu' within 'dropdown menu'
- 'invocation count' dropdown doesnt close on outside click
- extract [Fragment] and similar logic to a hook
- move `packages/ui/src/components/editor/common/hooks/use-click-outside.ts` to `packages/ui/src/hooks`
- move [Fragment] to a top level variable

Author: robertpiosik

apps/editor/src/views/panel/frontend/Main/MainView/components/Header/Header.tsx

@@ -26,6 +26,8 @@ type Props = {
   is_setup_complete: boolean
 }
 
+const MENU_MAX_HEIGHT = 'calc(100vh - 38px)'
+
 export const Header: React.FC<Props> = (props) => {
   const { t } = use_translation()
   const header_ref = useRef<HTMLDivElement>(null)
@@ -87,13 +89,14 @@ export const Header: React.FC<Props> = (props) => {
               )}
               selected_value={props.web_prompt_type}
               on_change={props.on_web_prompt_type_change}
-              menu_max_height="calc(100vh - 80px)"
+              menu_max_height={MENU_MAX_HEIGHT}
               info={t('header.prompt-type')}
               title={
                 is_mac
                   ? 'Change prompt type (⇧⌥)'
                   : 'Change prompt type (Shift+Alt)'
               }
+              match_button_width
             />
           )}
           {props.mode == MODE.API && (
@@ -107,13 +110,14 @@ export const Header: React.FC<Props> = (props) => {
               )}
               selected_value={props.api_prompt_type}
               on_change={props.on_api_prompt_type_change}
-              menu_max_height="calc(100vh - 80px)"
+              menu_max_height={MENU_MAX_HEIGHT}
               info={is_narrow_viewport ? undefined : t('header.prompt-type')}
               title={
                 is_mac
                   ? 'Change prompt type (⇧⌥)'
                   : 'Change prompt type (Shift+Alt)'
               }
+              match_button_width
             />
           )}
         </div>

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.module.scss

@@ -1,8 +1,5 @@
 .menu {
-  position: absolute;
-  top: 100%;
   padding-top: 4px;
-  right: 0;
   z-index: 2;
   width: max-content;
   text-align: left;
@@ -79,3 +76,12 @@
 .underlined {
   text-decoration: underline;
 }
+
+.anchored {
+  position: fixed;
+  z-index: 1;
+
+  & > * {
+    position: static;
+  }
+}

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useLayoutEffect, useRef } from 'react'
 import { Scrollable } from '../Scrollable'
 import styles from './DropdownMenu.module.scss'
 
@@ -16,14 +16,59 @@ export namespace DropdownMenu {
     underline_non_selected_items?: boolean
     max_width?: number | string
     max_height?: number | string
+    width?: number | string
+    min_width?: number | string
     info?: string
+    anchor_ref?: React.RefObject<HTMLElement>
+    is_open?: boolean
+    match_anchor_width?: boolean
   }
 }
 
 export const DropdownMenu: React.FC<DropdownMenu.Props> = (props) => {
   const [is_preselection_respected, set_is_preselection_respected] =
     useState<boolean>(true)
 
+  const dropdown_ref = useRef<HTMLDivElement>(null)
+  const [anchor_style, set_anchor_style] = useState<React.CSSProperties>({})
+
+  useLayoutEffect(() => {
+    if (props.is_open && props.anchor_ref?.current && dropdown_ref.current) {
+      const anchor_rect = props.anchor_ref.current.getBoundingClientRect()
+      const dropdown_rect = dropdown_ref.current.getBoundingClientRect()
+
+      let top = anchor_rect.bottom
+      let left = props.match_anchor_width
+        ? anchor_rect.left
+        : anchor_rect.right - dropdown_rect.width
+      let width: string | undefined
+
+      if (props.match_anchor_width) {
+        width = `${anchor_rect.width}px`
+      } else if (left < 0) {
+        left = 4
+      } else if (left + dropdown_rect.width > window.innerWidth) {
+        left = window.innerWidth - dropdown_rect.width - 4
+      }
+
+      const viewport_height = window.innerHeight
+      if (top + dropdown_rect.height > viewport_height - 4) {
+        const overflow = top + dropdown_rect.height - (viewport_height - 4)
+        top -= overflow
+      }
+
+      set_anchor_style({
+        top: `${top}px`,
+        left: `${left}px`,
+        width
+      })
+    } else if (!props.is_open) {
+      set_anchor_style({})
+    }
+  }, [props.is_open, props.match_anchor_width, props.items])
+
+  if (props.anchor_ref && !props.is_open) return null
+
   const has_any_checked = props.items.some((item) => item.checked)
 
   const content = (
@@ -75,8 +120,15 @@ export const DropdownMenu: React.FC<DropdownMenu.Props> = (props) => {
     </div>
   )
 
-  return (
-    <div className={styles.menu} style={{ maxWidth: props.max_width }}>
+  const menu = (
+    <div
+      className={styles.menu}
+      style={{
+        maxWidth: props.max_width,
+        width: props.width,
+        minWidth: props.min_width
+      }}
+    >
       <div className={styles.menu__inner}>
         {props.max_height ? (
           <Scrollable
@@ -96,4 +148,14 @@ export const DropdownMenu: React.FC<DropdownMenu.Props> = (props) => {
       </div>
     </div>
   )
+
+  if (props.anchor_ref) {
+    return (
+      <div ref={dropdown_ref} style={anchor_style} className={styles.anchored}>
+        {menu}
+      </div>
+    )
+  }
+
+  return menu
 }

packages/ui/src/components/editor/panel/InlineDropdown/InlineDropdown.tsx

@@ -1,7 +1,8 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useCallback } from 'react'
 import styles from './InlineDropdown.module.scss'
 import cn from 'classnames'
 import { DropdownMenu } from '../../common/DropdownMenu'
+import { use_click_outside } from '../../../../hooks/use-click-outside'
 
 export namespace InlineDropdown {
   export type Option<T extends string> = {
@@ -19,6 +20,7 @@ export namespace InlineDropdown {
     menu_max_height?: number | string
     info?: string
     title?: string
+    match_button_width?: boolean
   }
 }
 
@@ -53,23 +55,14 @@ export const InlineDropdown = <T extends string>(
     set_just_opened(false)
   }
 
-  useEffect(() => {
-    const handle_click_outside = (event: MouseEvent) => {
-      if (
-        container_ref.current &&
-        !container_ref.current.contains(event.target as Node)
-      ) {
-        opened_by_shortcut.current = false
-        set_is_open(false)
-        set_just_opened(false)
-      }
-    }
-
-    document.addEventListener('mousedown', handle_click_outside)
-    return () => {
-      document.removeEventListener('mousedown', handle_click_outside)
-    }
-  }, [])
+  use_click_outside(
+    container_ref,
+    useCallback(() => {
+      opened_by_shortcut.current = false
+      set_is_open(false)
+      set_just_opened(false)
+    }, [])
+  )
 
   useEffect(() => {
     set_is_open(false)
@@ -137,20 +130,23 @@ export const InlineDropdown = <T extends string>(
         )}
       </button>
 
-      {is_open && (
-        <DropdownMenu
-          items={props.options.map((option) => ({
-            label: option.label,
-            on_click: () => handle_select(option.value),
-            is_selected: just_opened && option.value == props.selected_value,
-            shortcut: option.shortcut
-          }))}
-          underline_non_selected_items={opened_by_shortcut.current}
-          max_width={props.menu_max_width}
-          max_height={props.menu_max_height}
-          info={props.info}
-        />
-      )}
+      <DropdownMenu
+        anchor_ref={container_ref}
+        is_open={is_open}
+        match_anchor_width={props.match_button_width}
+        items={props.options.map((option) => ({
+          label: option.label,
+          on_click: () => handle_select(option.value),
+          is_selected: just_opened && option.value == props.selected_value,
+          shortcut: option.shortcut
+        }))}
+        underline_non_selected_items={opened_by_shortcut.current}
+        max_width={props.menu_max_width}
+        max_height={props.menu_max_height}
+        width={props.match_button_width ? '100%' : undefined}
+        min_width={props.match_button_width ? 0 : undefined}
+        info={props.info}
+      />
     </div>
   )
 }