@defra/interactive-map 0.0.16-alpha → 0.0.17-alpha

package/src/App/components/PopupMenu/PopupMenu.jsx

@@ -1,280 +1,59 @@
-import React, { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom'
 import { stringToKebab } from '../../../utils/stringToKebab'
 import { useConfig } from '../../store/configContext'
 import { useApp } from '../../store/appContext'
 import { Icon } from '../Icon/Icon'
 import { useEvaluateProp } from '../../hooks/useEvaluateProp.js'
-
-/**
- * PopupMenu — accessible keyboard-navigable dropdown menu component.
- * Renders a role=menu list with selected item highlighting, keyboard nav (arrows/Home/End/Enter),
- * and closes-on-outside-click/focus behavior. Skips hidden items during navigation.
- *
- * @component
- * @param {string} popupMenuId
- *   Unique identifier for the menu element and item IDs (items get id={id}-item-{i})
- * @param {string} pluginId
- *   Identifier for the owning plugin, passed to evaluateProp for context
- * @param {string} buttonId
- *   Ref key of the button that triggered this menu; used to manage focus and detect outside clicks
- * @param {string} [startPos]
- *   Initial selection strategy: 'first' (first visible), 'last' (last visible), or null/undefined (no selection)
- * @param {number} [startIndex]
- *   Exact index to select on mount; takes precedence over startPos
- * @param {MutableRefObject} menuRef
- *   Ref to the menu UL element; used for focus management and click-outside detection
- * @param {Array} items
- *   Array of menu items {id, label, onClick, iconId?, iconSvgContent?, pressedWhen?} to render
- * @param {Function} setIsOpen
- *   Callback to close the menu (called with false when user presses Escape/Tab or clicks outside)
- * @returns {JSX.Element}
- *   A role=menu UL with keyboard handlers and visible=filtered LI children
- */
-// eslint-disable-next-line camelcase, react/jsx-pascal-case
-// sonarjs/disable-next-line function-name
-export const PopupMenu = ({ popupMenuId, buttonId, instigatorId, pluginId, startPos, startIndex, menuRef, items, setIsOpen }) => {
+import { usePopupMenu } from './usePopupMenu'
+
+const MenuItem = ({ item, isSelected, hiddenButtons, disabledButtons, pressedButtons, id, onItemClick }) => (
+  <li // NOSONAR
+    id={`${id}-${stringToKebab(item.id)}`}
+    className={`im-c-popup-menu__item${isSelected ? ' im-c-popup-menu__item--selected' : ''}`}
+    role={item.isPressed !== undefined || item.pressedWhen ? 'menuitemcheckbox' : 'menuitem'} // NOSONAR
+    aria-disabled={disabledButtons.has(item.id) || undefined} // NOSONAR
+    aria-checked={(item.isPressed !== undefined || item.pressedWhen) ? pressedButtons.has(item.id) : undefined} // NOSONAR
+    style={hiddenButtons.has(item.id) ? { display: 'none' } : undefined}
+    onClick={(e) => onItemClick(e, item)} // NOSONAR
+  >
+    {(item.iconId || item.iconSvgContent) && <Icon id={item.iconId} svgContent={item.iconSvgContent} />}
+    <span className='im-c-popup-menu__item-label'>{item.label}</span>
+  </li>
+)
+
+export const PopupMenu = ({ popupMenuId, buttonId, instigatorId, pluginId, startPos, startIndex, menuRef, items, setIsOpen, buttonRect }) => {
   const { id } = useConfig()
-  const { buttonRefs, buttonConfig, hiddenButtons, disabledButtons, pressedButtons } = useApp()
+  const { buttonRefs, buttonConfig, hiddenButtons, disabledButtons, pressedButtons, layoutRefs } = useApp()
   const instigatorKey = buttonId ?? instigatorId
   const instigator = buttonRefs.current[instigatorKey]
   const evaluateProp = useEvaluateProp()
 
-  /**
-   * Compute visible item indices by filtering out items in hiddenButtons.
-   * Memoized on items and hiddenButtons to avoid recomputation.
-   */
-  const visibleIndices = useMemo(() => {
-    const visible = []
-    items.forEach((item, idx) => {
-      if (!hiddenButtons.has(item.id)) {
-        visible.push(idx)
-      }
-    })
-    return visible
-  }, [items, hiddenButtons])
-
-  /**
-   * Initialize selected index from startIndex (exact value) or startPos ('first'/'last')
-   * Falls back to -1 (no selection) if no initial value provided or all items are hidden.
-   */
-  const [index, setIndex] = useState(() => {
-    if (typeof startIndex === 'number') {
-      return startIndex
-    }
-    if (startPos === 'first') {
-      return visibleIndices[0] ?? -1
-    }
-    if (startPos === 'last') {
-      return visibleIndices[visibleIndices.length - 1] ?? -1
-    }
-    return -1
+  const { index, handleMenuKeyDown, handleItemClick, menuStyle, menuDirection, menuHAlign } = usePopupMenu({
+    items,
+    hiddenButtons,
+    startIndex,
+    startPos,
+    instigator,
+    instigatorKey,
+    buttonRefs,
+    buttonConfig,
+    disabledButtons,
+    pluginId,
+    evaluateProp,
+    id,
+    menuRef,
+    setIsOpen,
+    buttonRect
   })
 
-  /**
-   * Helper: Close menu and return focus to instigator button.
-   * @param {Event} e
-   *   The event that triggered the close (may have preventDefault called)
-   * @param {boolean} [preventDefault=false]
-   *   Whether to call e.preventDefault() (true for Escape, false for Tab)
-   */
-  const closeAndFocus = (e, preventDefault = false) => {
-    if (preventDefault && e?.preventDefault) {
-      e.preventDefault()
-    }
-    instigator.focus()
-    setIsOpen(false)
-  }
-
-  /**
-   * Helper: Navigate visible items via ArrowDown/ArrowUp.
-   * ArrowDown moves forward (wraps at end); ArrowUp moves backward (wraps at start).
-   * When no selection (-1), ArrowDown picks first, ArrowUp picks last.
-   * @param {KeyboardEvent} e
-   *   Keyboard event (checked for ArrowDown/ArrowUp)
-   */
-  const navigateVisible = (e) => {
-    e.preventDefault()
-    const vis = visibleIndices
-    const n = vis.length
-    if (n === 0) {
-      return
-    }
-    const pos = vis.indexOf(index)
-    let nextPos
-    if (e.key === 'ArrowDown') {
-      nextPos = pos === -1 ? 0 : (pos + 1) % n
-    } else if (pos === -1) {
-      nextPos = n - 1
-    } else {
-      nextPos = (pos - 1 + n) % n
-    }
-    setIndex(vis[nextPos])
-  }
-
-  /**
-   * Helper: Invoke a menu item's action via buttonConfig or item.onClick.
-   * @param {Event} e - The triggering event
-   * @param {Object} item - The item to activate
-   */
-  const activateItem = (e, item) => {
-    const menuItemConfig = buttonConfig[item.id]
-    if (typeof menuItemConfig?.onClick === 'function') {
-      menuItemConfig.onClick(e, evaluateProp(ctx => ctx, pluginId))
-    } else if (typeof item.onClick === 'function') {
-      item.onClick(e.nativeEvent)
-    } else {
-      // No action
-    }
-    // For keyboard events, also dispatch a synthetic click so native window listeners fire
-    // (e.g. editVertexMode.onButtonClick for delete/undo in edit_vertex mode).
-    // Marked with _fromKeyboardActivation so handleItemClick ignores it and only the
-    // window listener handles it — preventing double-activation.
-    if (e.nativeEvent instanceof KeyboardEvent) {
-      const el = document.getElementById(`${id}-${stringToKebab(item.id)}`)
-      if (el) {
-        const click = new MouseEvent('click', { bubbles: true, cancelable: true })
-        click._fromKeyboardActivation = true
-        el.dispatchEvent(click)
-      }
-    }
-  }
-
-  /**
-   * Helper: Handle Enter key press.
-   * Closes menu, returns focus to instigator, then activates the selected item if enabled.
-   * @param {KeyboardEvent} e
-   *   The Enter keydown event
-   */
-  const handleEnter = (e) => {
-    e.preventDefault()
-    const item = items[index]
-    if (item && !disabledButtons.has(item.id)) {
-      activateItem(e, item)
-    }
-    instigator.focus()
-    setIsOpen(false)
-  }
-
-  /**
-   * Helper: Handle Space key press.
-   * For menuitemcheckbox: activates item only (menu stays open).
-   * For menuitem: closes menu, returns focus to instigator, then activates item.
-   * @param {KeyboardEvent} e
-   *   The Space keydown event
-   */
-  const handleSpace = (e) => {
-    e.preventDefault()
-    const item = items[index]
-    if (!item || disabledButtons.has(item.id)) {
-      return
-    }
-    const isCheckbox = item.isPressed !== undefined || item.pressedWhen
-    activateItem(e, item)
-    if (!isCheckbox) {
-      instigator.focus()
-      setIsOpen(false)
-    }
-  }
-
-  /**
-   * Main keyboard handler for the menu.
-   * Dispatches to helpers or directly handles:
-   * - Escape/Esc: close & focus instigator
-   * - Tab: close & focus instigator (without preventDefault)
-   * - ArrowDown/ArrowUp: navigate visible items
-   * - Home: select first visible
-   * - End: select last visible
-   * - Enter: call selected item's onClick & close
-   * @param {KeyboardEvent} e
-   *   Keyboard event from menu onKeyDown
-   */
-  const handleMenuKeyDown = (e) => {
-    if (['Escape', 'Esc'].includes(e.key)) {
-      closeAndFocus(e, true)
-      return
-    }
-    if (e.key === 'Tab') {
-      closeAndFocus(e)
-      return
-    }
-    if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
-      navigateVisible(e)
-      return
-    }
-    if (e.key === 'Home' && visibleIndices.length) {
-      setIndex(visibleIndices[0])
-      return
-    }
-    if (e.key === 'End' && visibleIndices.length) {
-      setIndex(visibleIndices[visibleIndices.length - 1])
-      return
-    }
-    if (e.key === 'Enter') {
-      handleEnter(e)
-    }
-    if (e.key === ' ') {
-      handleSpace(e)
-    }
-  }
-
-  /**
-   * Helper: Close menu if click/focus originated outside menu and instigator.
-   * Registered on document focusin and pointerdown events to detect outside interactions.
-   * @param {Event} e
-   *   The focusin or pointerdown event
-   */
-  const handleOutside = (e) => {
-    if (menuRef.current?.contains(e.target) || buttonRefs.current[instigatorKey]?.contains(e.target)) {
-      return
-    }
-    setIsOpen(false)
-  }
-
-  /**
-   * Helper: Handle item click.
-   * Closes menu and activates the item; does nothing if the item is disabled.
-   * @param {React.MouseEvent} e
-   *   React synthetic event from the LI click
-   * @param {Object} item
-   *   The clicked item object with {id, label, onClick, ...}
-   */
-  const handleItemClick = (e, item) => {
-    if (e.nativeEvent._fromKeyboardActivation) {
-      return
-    }
-    if (disabledButtons.has(item.id)) {
-      return
-    }
-    setIsOpen(false)
-    activateItem(e, item)
-  }
-
-  useEffect(() => {
-    menuRef.current?.focus()
-
-    // If startPos changes on mount, ensure selection respects visible items.
-    if (startPos === 'first') {
-      setIndex(visibleIndices[0] ?? -1)
-    } else if (startPos === 'last') {
-      setIndex(visibleIndices[visibleIndices.length - 1] ?? -1)
-    } else {
-      // No action
-    }
-
-    document.addEventListener('focusin', handleOutside)
-    document.addEventListener('pointerdown', handleOutside)
-
-    return () => {
-      document.removeEventListener('focusin', handleOutside)
-      document.removeEventListener('pointerdown', handleOutside)
-    }
-  }, [])
-
-  return (
+  return createPortal(
     <ul // NOSONAR
       ref={menuRef}
       id={popupMenuId}
       className='im-c-popup-menu'
+      data-direction={menuDirection}
+      data-halign={menuHAlign}
+      style={menuStyle}
       role='menu' // NOSONAR
       tabIndex='-1'
       aria-labelledby={instigatorKey}
@@ -282,20 +61,18 @@ export const PopupMenu = ({ popupMenuId, buttonId, instigatorId, pluginId, start
       onKeyDown={handleMenuKeyDown}
     >
       {items.map((item, i) => (
-        <li // NOSONAR
+        <MenuItem
           key={item.id}
-          id={`${id}-${stringToKebab(items[i].id)}`}
-          className={`im-c-popup-menu__item${index === i ? ' im-c-popup-menu__item--selected' : ''}`}
-          role={items[i].isPressed !== undefined || items[i].pressedWhen ? 'menuitemcheckbox' : 'menuitem'} // NOSONAR
-          aria-disabled={disabledButtons.has(items[i].id) || undefined} // NOSONAR
-          aria-checked={(items[i].isPressed !== undefined || items[i].pressedWhen) ? pressedButtons.has(items[i].id) : undefined} // NOSONAR
-          style={hiddenButtons.has(items[i].id) ? { display: 'none' } : undefined}
-          onClick={(e) => handleItemClick(e, items[i])} // NOSONAR
-        >
-          {(item.iconId || item.iconSvgContent) && <Icon id={item.iconId} svgContent={item.iconSvgContent} />}
-          <span className='im-c-popup-menu__item-label'>{item.label}</span>
-        </li>
+          item={item}
+          isSelected={index === i}
+          hiddenButtons={hiddenButtons}
+          disabledButtons={disabledButtons}
+          pressedButtons={pressedButtons}
+          id={id}
+          onItemClick={handleItemClick}
+        />
       ))}
-    </ul>
+    </ul>,
+    layoutRefs?.appContainerRef?.current ?? document.body
   )
 }

package/src/App/components/PopupMenu/PopupMenu.module.scss

@@ -13,10 +13,23 @@
   );
 
   background-color: var(--background-color);
-  position: absolute;
+  position: fixed;
+  z-index: 9999;
   list-style: none;
   margin: 0;
   padding: 0;
+
+  &[data-direction="below"] {
+    margin-top: var(--divider-gap);
+  }
+
+  &[data-direction="above"] {
+    margin-bottom: var(--divider-gap);
+  }
+
+  &[data-halign="center"] {
+    transform: translateX(-50%);
+  }
 }
 
 // 2. Elements
@@ -125,9 +138,3 @@
   opacity: 1;
 }
 
-// 3. Modifiers
-.im-o-app__actions .im-c-popup-menu {
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: calc(100% + (var(--primary-gap) * 2));
-}

package/src/App/components/PopupMenu/PopupMenu.test.jsx

@@ -22,7 +22,8 @@ const mockUseApp = {
   buttonConfig: {},
   hiddenButtons: new Set(),
   disabledButtons: new Set(),
-  pressedButtons: new Set()
+  pressedButtons: new Set(),
+  layoutRefs: { appContainerRef: { current: document.body } }
 }
 jest.mock('../../store/appContext', () => ({
   useApp: jest.fn(() => mockUseApp)
@@ -387,4 +388,72 @@ describe('PopupMenu', () => {
       expect(mockSetIsOpen).not.toHaveBeenCalled()
     })
   })
+
+  describe('buttonRect positioning', () => {
+    beforeEach(() => {
+      Object.defineProperty(window, 'innerWidth', { value: 1024, configurable: true })
+      Object.defineProperty(window, 'innerHeight', { value: 768, configurable: true })
+    })
+
+    it('uses top and data-direction=below when button is in top half', () => {
+      renderMenu({ buttonRect: { top: 100, bottom: 140, left: 50, right: 100 } })
+      const menu = screen.getByRole('menu')
+      expect(menu).toHaveStyle({ top: '140px' })
+      expect(menu).toHaveAttribute('data-direction', 'below')
+    })
+
+    it('uses bottom and data-direction=above when button is in bottom half', () => {
+      renderMenu({ buttonRect: { top: 500, bottom: 540, left: 50, right: 100 } })
+      const menu = screen.getByRole('menu')
+      expect(menu).toHaveStyle({ bottom: '268px' }) // 768 - 500
+      expect(menu).toHaveAttribute('data-direction', 'above')
+    })
+
+    it('uses left and data-halign=left when button center is in left third', () => {
+      // centerX = (50+100)/2 = 75 < 1024/3 ≈ 341
+      renderMenu({ buttonRect: { top: 100, bottom: 140, left: 50, right: 100 } })
+      const menu = screen.getByRole('menu')
+      expect(menu).toHaveStyle({ left: '50px' })
+      expect(menu).toHaveAttribute('data-halign', 'left')
+    })
+
+    it('uses right and data-halign=right when button center is in right third', () => {
+      // centerX = (700+750)/2 = 725 > 1024*2/3 ≈ 683
+      renderMenu({ buttonRect: { top: 100, bottom: 140, left: 700, right: 750 } })
+      const menu = screen.getByRole('menu')
+      expect(menu).toHaveStyle({ right: '274px' }) // 1024 - 750
+      expect(menu).toHaveAttribute('data-halign', 'right')
+    })
+
+    it('uses button centerX and data-halign=center when button center is in middle third', () => {
+      // centerX = (400+450)/2 = 425, between 341 and 683
+      renderMenu({ buttonRect: { top: 100, bottom: 140, left: 400, right: 450 } })
+      const menu = screen.getByRole('menu')
+      expect(menu).toHaveStyle({ left: '425px' })
+      expect(menu).toHaveAttribute('data-halign', 'center')
+    })
+
+    it('applies no inline style when buttonRect is not provided', () => {
+      renderMenu()
+      const style = screen.getByRole('menu').style
+      expect(style.top).toBe('')
+      expect(style.bottom).toBe('')
+      expect(style.left).toBe('')
+      expect(style.right).toBe('')
+    })
+  })
+
+  it('falls back to document.body when appContainerRef.current is null', () => {
+    const saved = mockUseApp.layoutRefs
+    mockUseApp.layoutRefs = { appContainerRef: { current: null } }
+    renderMenu()
+    expect(screen.getByRole('menu')).toBeInTheDocument()
+    mockUseApp.layoutRefs = saved
+  })
+
+  it('closes menu on window resize', () => {
+    renderMenu()
+    window.dispatchEvent(new Event('resize'))
+    expect(mockSetIsOpen).toHaveBeenCalledWith(false)
+  })
 })