@defra/interactive-map 0.0.4-alpha → 0.0.5-alpha

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

@@ -0,0 +1,246 @@
+import React, { useEffect, useState, useMemo } from 'react'
+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 }) => {
+  const { id } = useConfig()
+  const { buttonRefs, buttonConfig, hiddenButtons, disabledButtons, pressedButtons } = 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
+  })
+
+  /**
+   * 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: Handle Enter key press.
+   * Calls onClick on selected item (by index), then closes menu and returns focus to instigator.
+   * @param {KeyboardEvent} e
+   *   The Enter keydown event
+   */
+  const handleEnter = (e) => {
+    e.preventDefault()
+    instigator.focus()
+    setIsOpen(false)
+    items[index]?.onClick(e.nativeEvent)
+  }
+
+  /**
+   * 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)
+    }
+  }
+
+  /**
+   * 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.
+   * Looks up buttonConfig[item.id] to decide which onClick to call (item's or buttonConfig's).
+   * Closes menu after invoking onClick.
+   * @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) => {
+    const menuItemConfig = buttonConfig[item.id]
+    setIsOpen(false)
+    if (typeof menuItemConfig?.onClick !== 'function') {
+      item.onClick?.(e.nativeEvent)
+      return
+    }
+    menuItemConfig.onClick(e, evaluateProp(ctx => ctx, pluginId))
+  }
+
+  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 (
+    <ul // NOSONAR
+      ref={menuRef}
+      id={popupMenuId}
+      className='fm-c-popup-menu'
+      role='menu' // NOSONAR
+      tabIndex='-1'
+      aria-labelledby={instigatorKey}
+      aria-activedescendant={index >= 0 ? `${id}-${stringToKebab(items[index].id)}` : undefined}
+      onKeyDown={handleMenuKeyDown}
+    >
+      {items.map((item, i) => (
+        <li // NOSONAR
+          key={item.id}
+          id={`${id}-${stringToKebab(items[i].id)}`}
+          className={`fm-c-popup-menu__item${index === i ? ' fm-c-popup-menu__item--selected' : ''}`}
+          role='menuitem' // NOSONAR
+          aria-disabled={disabledButtons.has(items[i].id) || undefined} // NOSONAR
+          aria-pressed={(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='fm-c-popup-menu__item-label'>{item.label}</span>
+        </li>
+      ))}
+    </ul>
+  )
+}

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

@@ -0,0 +1,70 @@
+// ===================================================
+// Component: PopupMenu
+// ===================================================
+
+@use '../../../scss/tools/index' as tools;
+
+// 1. Base styles
+
+.fm-c-popup-menu {
+  @include tools.border-focus-base(
+    $is-inset: false,
+    $type: button
+  );
+
+  background-color: var(--background-color);
+  position: absolute;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+// 2. Elements
+.fm-c-popup-menu__item {
+  display: flex;
+  align-items: center;
+  padding: var(--divider-gap);
+  border-top: 1px solid var(--button-hover-color);
+  text-align: left;
+  cursor: pointer;
+  min-width: var(--popup-menu-min-width);
+  max-width: var(--popup-menu-max-width);
+
+  &:first-child {
+    border-top: 0;
+  }
+
+  &:hover:not(.fm-c-popup-menu__item--selected) {
+    @media (hover: hover) and (pointer: fine) {
+        background-color: var(--button-hover-color);
+    }
+  }
+
+  &:hover:not(.fm-c-popup-menu__item--selected) .fm-c-popup-menu__item-label {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--foreground-color);
+    text-decoration-skip-ink: none;
+  }
+
+  &--selected {
+    background-color: var(--button-hover-color);
+  }
+
+  &--selected .fm-c-popup-menu__item-label {
+      @include tools.link-focus;
+  }
+
+  svg + span {
+    margin-left: var(--button-icon-label-offset);
+    white-space: nowrap;
+  }
+}
+
+// 3. Modifiers
+.im-o-app__actions .fm-c-popup-menu {
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: calc(100% + (var(--primary-gap) * 2));
+}

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

@@ -0,0 +1,304 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { PopupMenu } from './PopupMenu'
+
+// Mock Icon
+jest.mock('../Icon/Icon', () => ({
+  Icon: ({ id, svgContent }) => <svg data-testid={id || 'custom-icon'} data-svg={svgContent} />
+}))
+
+// Mock useEvaluateProp
+const mockEvaluateProp = jest.fn((fn) => fn({ /* mock context */ }))
+jest.mock('../../hooks/useEvaluateProp.js', () => ({
+  useEvaluateProp: () => mockEvaluateProp
+}))
+
+// Mock useConfig to provide `id` used for stable item ids
+jest.mock('../../store/configContext', () => ({ useConfig: () => ({ id: 'app' }) }))
+
+// Mock useApp
+const mockUseApp = {
+  buttonRefs: { current: { instigator: { focus: jest.fn(), contains: () => false } } },
+  buttonConfig: {},
+  hiddenButtons: new Set(),
+  disabledButtons: new Set(),
+  pressedButtons: new Set()
+}
+jest.mock('../../store/appContext', () => ({
+  useApp: jest.fn(() => mockUseApp)
+}))
+
+describe('PopupMenu', () => {
+  const items = [
+    { id: 'item1', label: 'Item 1', onClick: jest.fn() },
+    { id: 'item2', label: 'Item 2', onClick: jest.fn(), iconId: 'icon2', pressedWhen: () => true }
+  ]
+  let menuRef
+  const mockSetIsOpen = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    menuRef = { current: { focus: jest.fn(), contains: () => false } }
+
+    // Reset mockUseApp state
+    mockUseApp.buttonRefs.current = { instigator: { focus: jest.fn(), contains: () => false } }
+    mockUseApp.buttonConfig = {}
+    mockUseApp.hiddenButtons = new Set()
+    mockUseApp.disabledButtons = new Set()
+    mockUseApp.pressedButtons = new Set()
+  })
+
+  const renderMenu = (props = {}) =>
+    render(
+      <PopupMenu
+        id='menu'
+        pluginId='plugin1'
+        instigatorId='instigator'
+        startIndex={0}
+        menuRef={menuRef}
+        items={items}
+        setIsOpen={mockSetIsOpen}
+        {...props}
+      />
+    )
+
+  // Test helpers to reduce duplication
+  const setHidden = (ids = []) => {
+    mockUseApp.hiddenButtons = new Set(ids)
+  }
+  const setPressed = (ids = []) => {
+    mockUseApp.pressedButtons = new Set(ids)
+  }
+  const renderDirect = (opts = {}) => {
+    const directMenuRef = { current: { focus: jest.fn(), contains: () => false } }
+    render(
+      <PopupMenu
+        id='direct'
+        pluginId='plugin1'
+        instigatorId='instigator'
+        menuRef={directMenuRef}
+        items={items}
+        setIsOpen={mockSetIsOpen}
+        {...opts}
+      />
+    )
+    return directMenuRef
+  }
+  const dispatchFocusIn = ({ menuContains = false, instigatorContains = false, target = document.body } = {}) => {
+    jest.spyOn(menuRef.current, 'contains').mockReturnValue(menuContains)
+    jest.spyOn(mockUseApp.buttonRefs.current.instigator, 'contains').mockReturnValue(instigatorContains)
+    const ev = new FocusEvent('focusin')
+    Object.defineProperty(ev, 'target', { value: target, enumerable: true })
+    document.dispatchEvent(ev)
+  }
+  const expectSelected = (text) => expect(screen.getByText(text).parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+  const expectNotSelected = (text) => expect(screen.getByText(text).parentElement).not.toHaveClass('fm-c-popup-menu__item--selected')
+
+  it('renders items with labels and icons', () => {
+    renderMenu()
+    expect(screen.getByText('Item 1')).toBeInTheDocument()
+    expect(screen.getByText('Item 2')).toBeInTheDocument()
+    expect(screen.getByTestId('icon2')).toBeInTheDocument()
+  })
+
+  it('applies selected class to active index', () => {
+    renderMenu({ startIndex: 1 })
+    expect(screen.getByText('Item 2').parentElement).toHaveClass(
+      'fm-c-popup-menu__item--selected'
+    )
+  })
+
+  it('handles ArrowDown, ArrowUp, Home, End keys', () => {
+    renderMenu()
+    const ul = screen.getByRole('menu')
+    fireEvent.keyDown(ul, { key: 'ArrowDown' })
+    expect(screen.getByText('Item 2').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+    fireEvent.keyDown(ul, { key: 'ArrowDown' })
+    expect(screen.getByText('Item 1').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+    fireEvent.keyDown(ul, { key: 'ArrowUp' })
+    expect(screen.getByText('Item 2').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+    fireEvent.keyDown(ul, { key: 'Home' })
+    expect(screen.getByText('Item 1').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+    fireEvent.keyDown(ul, { key: 'End' })
+    expect(screen.getByText('Item 2').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+  })
+
+  it('handles Enter key to call onClick and close menu', () => {
+    renderMenu({ startIndex: 1 })
+    const ul = screen.getByRole('menu')
+    fireEvent.keyDown(ul, { key: 'Enter' })
+    expect(items[1].onClick).toHaveBeenCalled()
+    expect(mockSetIsOpen).toHaveBeenCalled()
+  })
+
+  it('handles Escape and Tab to close menu', () => {
+    renderMenu()
+    const ul = screen.getByRole('menu')
+    fireEvent.keyDown(ul, { key: 'Escape' })
+    expect(mockSetIsOpen).toHaveBeenCalled()
+    fireEvent.keyDown(ul, { key: 'Tab' })
+    expect(mockSetIsOpen).toHaveBeenCalled()
+  })
+
+  it('calls item onClick directly if no buttonConfig', () => {
+    renderMenu()
+    fireEvent.click(screen.getByText('Item 1'))
+    expect(items[0].onClick).toHaveBeenCalled()
+    expect(mockSetIsOpen).toHaveBeenCalled()
+  })
+
+  it('calls buttonConfig.onClick with evaluateProp if defined', () => {
+    const mockOnClick = jest.fn()
+    mockUseApp.buttonConfig = { item2: { onClick: mockOnClick } }
+
+    renderMenu()
+    fireEvent.click(screen.getByText('Item 2'))
+
+    expect(mockOnClick).toHaveBeenCalled()
+    expect(mockEvaluateProp).toHaveBeenCalled()
+    expect(mockSetIsOpen).toHaveBeenCalled()
+  })
+
+  it('does nothing if click is inside menu', () => {
+    renderMenu()
+    const element = document.createElement('div')
+    dispatchFocusIn({ menuContains: true, target: element })
+    expect(mockSetIsOpen).not.toHaveBeenCalled()
+  })
+
+  it('does nothing if click is inside instigator', () => {
+    renderMenu()
+    dispatchFocusIn({ menuContains: false, instigatorContains: true, target: document.createElement('div') })
+    expect(mockSetIsOpen).not.toHaveBeenCalled()
+  })
+
+  it('returns early if click/focus target is inside menu or instigator', () => {
+    // menuRef contains → early return
+    renderMenu()
+    dispatchFocusIn({ menuContains: true, target: document.createElement('div') })
+    expect(mockSetIsOpen).not.toHaveBeenCalled()
+
+    // instigator contains → early return
+    jest.clearAllMocks()
+    jest.restoreAllMocks()
+    jest.spyOn(mockUseApp.buttonRefs.current.instigator, 'contains').mockReturnValue(true)
+    renderMenu()
+    dispatchFocusIn({ menuContains: false, instigatorContains: true, target: document.createElement('div') })
+    expect(mockSetIsOpen).not.toHaveBeenCalled()
+  })
+
+  it('evaluates line 51 but continues if target is outside', () => {
+    renderMenu()
+    dispatchFocusIn({ menuContains: false, instigatorContains: false, target: document.body })
+    expect(mockSetIsOpen).toHaveBeenCalled()
+  })
+
+  it('closes when clicking outside', () => {
+    renderMenu()
+    document.dispatchEvent(new MouseEvent('pointerdown', { target: document.body }))
+    expect(mockSetIsOpen).toHaveBeenCalled()
+  })
+
+  it('startPos="first" skips hidden items when selecting initial item', () => {
+    setHidden(['item1'])
+    renderMenu({ startPos: 'first', startIndex: undefined })
+    expectSelected('Item 2')
+  })
+
+  it('startPos="last" skips hidden items when selecting initial item', () => {
+    setHidden(['item2'])
+    renderMenu({ startPos: 'last', startIndex: undefined })
+    expectSelected('Item 1')
+  })
+
+  it('ArrowDown/ArrowUp from no selection picks first/last visible', () => {
+    renderMenu({ startIndex: -1 })
+    const ul = screen.getByRole('menu')
+    fireEvent.keyDown(ul, { key: 'ArrowDown' })
+    expect(screen.getByText('Item 1').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+    fireEvent.keyDown(ul, { key: 'ArrowUp' })
+    expect(screen.getByText('Item 2').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+  })
+
+  it('ArrowUp from no selection picks last visible', () => {
+    renderMenu({ startIndex: -1 })
+    const ul = screen.getByRole('menu')
+    fireEvent.keyDown(ul, { key: 'ArrowUp' })
+    expect(screen.getByText('Item 2').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+  })
+
+  it('initializes with no selection when neither startIndex nor startPos provided', () => {
+    renderMenu({ startIndex: undefined, startPos: undefined })
+    expect(screen.getByText('Item 1').parentElement).not.toHaveClass('fm-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 2').parentElement).not.toHaveClass('fm-c-popup-menu__item--selected')
+  })
+
+  it('does nothing when navigating and no visible items', () => {
+    mockUseApp.hiddenButtons = new Set(['item1', 'item2'])
+    renderMenu({ startIndex: -1 })
+    const ul = screen.getByRole('menu')
+    fireEvent.keyDown(ul, { key: 'ArrowDown' })
+    expect(screen.getByText('Item 1').parentElement).not.toHaveClass('fm-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 2').parentElement).not.toHaveClass('fm-c-popup-menu__item--selected')
+  })
+
+  it('Enter with no selection closes but does not call any item onClick', () => {
+    renderMenu({ startIndex: -1 })
+    const ul = screen.getByRole('menu')
+    fireEvent.keyDown(ul, { key: 'Enter' })
+    expect(items[0].onClick).not.toHaveBeenCalled()
+    expect(items[1].onClick).not.toHaveBeenCalled()
+    expect(mockSetIsOpen).toHaveBeenCalled()
+  })
+
+  it('Escape calls focus on instigator', () => {
+    const focusSpy = jest.fn()
+    mockUseApp.buttonRefs.current.instigator.focus = focusSpy
+    renderMenu()
+    const ul = screen.getByRole('menu')
+    fireEvent.keyDown(ul, { key: 'Escape' })
+    expect(focusSpy).toHaveBeenCalled()
+  })
+
+  it('direct render without startIndex respects startPos="first" (covers initializer and effect)', () => {
+    renderDirect({ startPos: 'first' })
+    expectSelected('Item 1')
+  })
+
+  it('direct render without startIndex respects startPos="last" (covers initializer and effect)', () => {
+    renderDirect({ startPos: 'last' })
+    expectSelected('Item 2')
+  })
+
+  it('startPos first with no visible items falls back to no selection', () => {
+    setHidden(['item1', 'item2'])
+    renderDirect({ startPos: 'first' })
+    expectNotSelected('Item 1')
+    expectNotSelected('Item 2')
+  })
+
+  it('startPos last with no visible items falls back to no selection', () => {
+    setHidden(['item1', 'item2'])
+    renderDirect({ startPos: 'last' })
+    expectNotSelected('Item 1')
+    expectNotSelected('Item 2')
+  })
+
+  it('sets aria-pressed and hides items based on pressedWhen and hiddenButtons', () => {
+    setPressed(['item2'])
+    setHidden(['item1'])
+    renderMenu()
+    const item1 = screen.getByText('Item 1').parentElement
+    const item2 = screen.getByText('Item 2').parentElement
+    expect(item1).toHaveStyle('display: none')
+    expect(item2).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('ignores unrelated keys (covers Enter false branch)', () => {
+    renderMenu({ startIndex: 1 })
+    const ul = screen.getByRole('menu')
+    fireEvent.keyDown(ul, { key: 'a' })
+    expect(items[1].onClick).not.toHaveBeenCalled()
+    expect(mockSetIsOpen).not.toHaveBeenCalled()
+  })
+})

package/src/App/components/Tooltip/Tooltip.jsx

@@ -71,6 +71,8 @@ export const Tooltip = ({ children, content }) => {
       childRef(node)
     } else if (childRef && typeof childRef === 'object') {
       childRef.current = node
+    } else {
+      // No action
     }
   }
 
@@ -80,13 +82,13 @@ export const Tooltip = ({ children, content }) => {
     onMouseLeave: hide,
     onMouseDown: cancel,
     onKeyDown: cancel,
-    onFocus: (e) => {
+    onFocus: () => {
       if (interfaceType === 'keyboard') {
         show()
       }
       setFocused(true)
     },
-    onBlur: (e) => {
+    onBlur: () => {
       hide()
       setFocused(false)
     },

package/src/App/components/Tooltip/getTooltipPosition.js

@@ -21,7 +21,7 @@ export function getTooltipPosition (triggerEl, containerEl) {
 
   // Step 1: Find the actual smallest space
   const entries = Object.entries(space)
-  const sorted = entries.sort(([, a], [, b]) => a - b)
+  const sorted = entries.toSorted(([, a], [, b]) => a - b)
   const [leastSide, leastValue] = sorted[0]
 
   // Step 2: Prefer horizontal if it's close in smallness

package/src/App/components/Viewport/MapController.jsx

@@ -26,7 +26,7 @@ export const MapController = ({ mapContainerRef }) => {
   // Initialize map provider when props are available
   useEffect(() => {
     if (!safeZoneInset || !isLayoutReady || !mapStyle || !mapSize || isMapInitialized.current) {
-      return
+      return undefined
     }
 
     requestAnimationFrame(() => {

package/src/App/components/Viewport/MapStatus.jsx

@@ -8,7 +8,7 @@ export const MapStatus = () => {
   const { mapStatusRef } = useService()
 
   return (
-    <div
+    <div // NOSONAR: div + status role is semantically correct here, <output> implies a calculation result
       ref={mapStatusRef}
       role='status'
       className='im-c-viewport__status'

package/src/App/components/Viewport/Viewport.jsx

@@ -30,7 +30,7 @@ export const Viewport = ({ keyboardHintPortalRef }) => {
 
   // Attach map events
   useMapEvents({
-    [events.MAP_CLICK]: (e) => mapProvider?.clearHighlightedLabel?.()
+    [events.MAP_CLICK]: () => mapProvider?.clearHighlightedLabel?.()
   })
 
   // Manage keyboard hint visibility using local state
@@ -53,7 +53,7 @@ export const Viewport = ({ keyboardHintPortalRef }) => {
   useEffect(() => {
     const mainEl = layoutRefs.mainRef?.current
     if (!mainEl) {
-      return
+      return undefined
     }
 
     mainEl.classList.toggle('im-o-app__main--keyboard-hint-visible', showHint)