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

package/providers/maplibre/src/utils/queryFeatures.js

@@ -0,0 +1,146 @@
+/**
+ * Calculates the squared distance from a point (p) to a line segment (v to w).
+ */
+const distToSegmentSquared = (p, v, w) => {
+  const l2 = (v.x - w.x) ** 2 + (v.y - w.y) ** 2
+  if (l2 === 0) {
+    return (p.x - v.x) ** 2 + (p.y - v.y) ** 2
+  }
+  let t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2
+  t = Math.max(0, Math.min(1, t))
+  return (p.x - (v.x + t * (w.x - v.x))) ** 2 + (p.y - (v.y + t * (w.y - v.y))) ** 2
+}
+
+/**
+ * Ray-casting algorithm to determine if a point is inside a polygon.
+ */
+const isPointInPolygon = (point, ring) => {
+  const [px, py] = point
+  let inside = false
+  for (let i = 0, j = ring.length - 1; i < ring.length; j = i, i++) {
+    const [xi, yi] = ring[i]
+    const [xj, yj] = ring[j]
+    const isAboveI = yi > py
+    const isAboveJ = yj > py
+
+    if (isAboveI === isAboveJ) {
+      continue
+    }
+    // 2. Calculate horizontal intersection
+    const intersectX = ((xj - xi) * (py - yi)) / (yj - yi) + xi
+
+    if (px < intersectX) {
+      inside = !inside;
+    }
+  }
+  return inside
+}
+
+/**
+ * Calculates minimum squared pixel distance to the geometry.
+ */
+const getMinDistToGeometry = (map, point, geometry) => {
+  const { coordinates: coords, type } = geometry
+  let minSqDist = Infinity
+  const getScreenPt = (lngLat) => map.project(lngLat)
+  
+  const processLine = (lineCoords) => {
+    for (let i = 0; i < lineCoords.length - 1; i++) {
+      const d2 = distToSegmentSquared(point, getScreenPt(lineCoords[i]), getScreenPt(lineCoords[i + 1]))
+      if (d2 < minSqDist) {
+        minSqDist = d2
+      }
+    }
+  }
+  
+  if (type === 'Point') {
+    const p = getScreenPt(coords)
+    minSqDist = (point.x - p.x) ** 2 + (point.y - p.y) ** 2
+  } else if (type === 'LineString' || type === 'MultiPoint') {
+    if (type === 'LineString') {
+      processLine(coords)
+    } else {
+      coords.forEach((pt) => {
+        const p = getScreenPt(pt)
+        const d2 = (point.x - p.x) ** 2 + (point.y - p.y) ** 2
+        if (d2 < minSqDist) {
+          minSqDist = d2
+        }
+      })
+    }
+  } else if (type === 'Polygon' || type === 'MultiLineString') {
+    coords.forEach(processLine)
+  } else if (type === 'MultiPolygon') {
+    coords.forEach((poly) => poly.forEach(processLine))
+  } else {
+    // No action
+  }
+  return minSqDist
+}
+
+/**
+ * Query features prioritizing Layer Order, then Containment for Polygons.
+ */
+export const queryFeatures = (map, point, options = {}) => {
+  const { radius = 10 } = options
+  const queryArea = [[point.x - radius, point.y - radius], [point.x + radius, point.y + radius]]
+  const rawFeatures = map.queryRenderedFeatures(queryArea)
+  if (rawFeatures.length === 0) {
+    return []
+  }
+
+  // Identify layer visual hierarchy
+  const layerStack = []
+  rawFeatures.forEach(f => {
+    if (layerStack.includes(f.layer.id) === false) {
+      layerStack.push(f.layer.id)
+    }
+  })
+
+  // Deduplicate Bottom-Up to favor data layers over highlight layers
+  const seenIds = new Set()
+  const uniqueFeatures = []
+  for (let i = rawFeatures.length - 1; i >= 0; i--) {
+    const f = rawFeatures[i]
+    const featureId = f.id === undefined ? JSON.stringify(f.properties) : f.id
+    if (seenIds.has(featureId) === false) {
+      seenIds.add(featureId)
+      uniqueFeatures.push(f)
+    }
+  }
+
+  const clickLngLat = map.unproject(point)
+  const clickPt = [clickLngLat.lng, clickLngLat.lat]
+
+  return uniqueFeatures
+    .map((f) => {
+      let score = 0
+      const type = f.geometry.type
+      const pixelDistSq = getMinDistToGeometry(map, point, f.geometry)
+      
+      // PRIORITY 1: LAYER ORDER
+      const layerRank = layerStack.indexOf(f.layer.id)
+      score += (layerRank * 1000000)
+
+      // PRIORITY 2: CONTAINMENT (Polygon Special Treatment)
+      if (type.includes('Polygon')) {
+        const polys = type === 'Polygon' ? [f.geometry.coordinates] : f.geometry.coordinates
+        const isInside = polys.some((ring) => isPointInPolygon(clickPt, ring[0]))
+        
+        if (isInside === true) {
+          // Massive boost for polygons if we are actually inside them
+          score -= 500000 // NOSONAR - tolerance used only here
+        } else {
+          // If we are outside a polygon, it loses significantly to anything we ARE inside
+          score += 100000 // NOSONAR - tolerance used only here
+        }
+      }
+
+      // PRIORITY 3: DISTANCE (Final Tie-breaker)
+      score += pixelDistSq
+
+      return { f, score }
+    })
+    .sort((a, b) => a.score - b.score)
+    .map(({ f }) => f)
+}

package/providers/maplibre/src/utils/spatial.js

@@ -123,26 +123,23 @@ const getCardinalMove = (from, to) => {
  * @param {Array<[number, number]>} pixels - Array of pixel coordinates.
  * @returns {number} Index of the closest pixel in the given direction.
  */
+const isInDirection = (direction, dx, dy) => {
+  switch (direction) {
+    case 'ArrowUp': return dy < 0 && Math.abs(dy) >= Math.abs(dx)
+    case 'ArrowDown': return dy > 0 && Math.abs(dy) >= Math.abs(dx)
+    case 'ArrowLeft': return dx < 0 && Math.abs(dx) > Math.abs(dy)
+    case 'ArrowRight': return dx > 0 && Math.abs(dx) > Math.abs(dy)
+    default: return false
+  }
+}
+
 const spatialNavigate = (direction, start, pixels) => {
   const [sx, sy] = start
 
   // Direction filters
-  const candidates = pixels.filter(([x, y]) => {
-    if (x === sx && y === sy) {
-      return false
-    }
-
-    const dx = x - sx
-    const dy = y - sy
-
-    switch (direction) {
-      case 'ArrowUp': return dy < 0 && Math.abs(dy) >= Math.abs(dx)
-      case 'ArrowDown': return dy > 0 && Math.abs(dy) >= Math.abs(dx)
-      case 'ArrowLeft': return dx < 0 && Math.abs(dx) > Math.abs(dy)
-      case 'ArrowRight': return dx > 0 && Math.abs(dx) > Math.abs(dy)
-      default: return false
-    }
-  })
+  const candidates = pixels.filter(([x, y]) =>
+    (x !== sx || y !== sy) && isInDirection(direction, x - sx, y - sy)
+  )
 
   if (!candidates.length) {
     return pixels.findIndex(p => p[0] === sx && p[1] === sy)
@@ -169,7 +166,7 @@ const getResolution = (center, zoom) => {
   const TILE_SIZE = 512
   const lat = center.lat
   const scale = Math.pow(2, zoom)
-  const resolution = (EARTH_CIRCUMFERENCE * Math.cos((lat * Math.PI) / 180)) / (scale * TILE_SIZE)
+  const resolution = (EARTH_CIRCUMFERENCE * Math.cos((lat * Math.PI) / 180)) / (scale * TILE_SIZE) // NOSONAR - 180 is degrees-to-radians conversion
   return resolution
 }
 

package/sonar-project.properties

@@ -11,13 +11,50 @@ sonar.javascript.lcov.reportPaths=coverage/lcov.info
 sonar.sourceEncoding=UTF-8
 
 sonar.sources=src,plugins,providers
-sonar.exclusions=**/*.test.*,**/__mocks__/**,**/__stubs__/**,**/dist/**,**/node_modules/**
+sonar.exclusions=**/*.test.*,**/__mocks__/**,**/__stubs__/**,**/dist/**,**/node_modules/**,plugins/beta/**,providers/beta/**
 sonar.tests=src,plugins,providers
 sonar.test.inclusions=**/*.test.*,**/__mocks__/**,**/__stubs__/**
 sonar.cpd.exclusions=**/*.test.*,**/__mocks__/**,**/__stubs__/**
 
-sonar.issue.ignore.multicriteria=reactPropsJs,reactPropsJsx
+# Ignored rules
+sonar.issue.ignore.multicriteria=reactPropsJs,reactPropsJsx,preferGlobalThisJs,preferGlobalThisJsx,preferAtJs,preferAtJsx,replaceAllJs,replaceAllJsx,stringReplaceAllJs,stringReplaceAllJsx,pascalCaseFunctionsJs,pascalCaseFunctionsJsx,pascalCaseFunctionsTs,pascalCaseFunctionsTsx
+
+# S6774: React props validation - using TypeScript/JSDoc for prop types instead
 sonar.issue.ignore.multicriteria.reactPropsJs.ruleKey=javascript:S6774
 sonar.issue.ignore.multicriteria.reactPropsJs.resourceKey=**/*.js
 sonar.issue.ignore.multicriteria.reactPropsJsx.ruleKey=javascript:S6774
-sonar.issue.ignore.multicriteria.reactPropsJsx.resourceKey=**/*.jsx
+sonar.issue.ignore.multicriteria.reactPropsJsx.resourceKey=**/*.jsx
+
+# S7764: Prefer globalThis over window
+sonar.issue.ignore.multicriteria.preferGlobalThisJs.ruleKey=javascript:S7764
+sonar.issue.ignore.multicriteria.preferGlobalThisJs.resourceKey=**/*.js
+sonar.issue.ignore.multicriteria.preferGlobalThisJsx.ruleKey=javascript:S7764
+sonar.issue.ignore.multicriteria.preferGlobalThisJsx.resourceKey=**/*.jsx
+
+# S7755: Prefer .at() over [index]
+sonar.issue.ignore.multicriteria.preferAtJs.ruleKey=javascript:S7755
+sonar.issue.ignore.multicriteria.preferAtJs.resourceKey=**/*.js
+sonar.issue.ignore.multicriteria.preferAtJsx.ruleKey=javascript:S7755
+sonar.issue.ignore.multicriteria.preferAtJsx.resourceKey=**/*.jsx
+
+# S6316: Array.prototype.replaceAll may not be supported in all browsers
+sonar.issue.ignore.multicriteria.replaceAllJs.ruleKey=javascript:S6316
+sonar.issue.ignore.multicriteria.replaceAllJs.resourceKey=**/*.js
+sonar.issue.ignore.multicriteria.replaceAllJsx.ruleKey=javascript:S6316
+sonar.issue.ignore.multicriteria.replaceAllJsx.resourceKey=**/*.jsx
+
+# S7781: Prefer .replaceAll() over .replace() with global regex
+sonar.issue.ignore.multicriteria.stringReplaceAllJs.ruleKey=javascript:S7781
+sonar.issue.ignore.multicriteria.stringReplaceAllJs.resourceKey=**/*.js
+sonar.issue.ignore.multicriteria.stringReplaceAllJsx.ruleKey=javascript:S7781
+sonar.issue.ignore.multicriteria.stringReplaceAllJsx.resourceKey=**/*.jsx
+
+# S100: Function names should comply with a naming convention (PascalCase for React/Inits) - mustn't pics up React functions
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsJs.ruleKey=javascript:S100
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsJs.resourceKey=**/*.js
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsJsx.ruleKey=javascript:S100
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsJsx.resourceKey=**/*.jsx
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsTs.ruleKey=javascript:S100
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsTs.resourceKey=**/*.ts
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsTsx.ruleKey=javascript:S100
+sonar.issue.ignore.multicriteria.pascalCaseFunctionsTsx.resourceKey=**/*.tsx

package/src/App/components/Actions/Actions.jsx

@@ -3,7 +3,7 @@ import { useApp } from '../../store/appContext'
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
-export const Actions = ({ slot, children }) => {
+export const Actions = ({ children }) => {
   const { openPanels, panelConfig, breakpoint } = useApp()
 
   const childArray = React.Children.toArray(children)
@@ -21,7 +21,7 @@ export const Actions = ({ slot, children }) => {
   ].filter(Boolean).join(' ')
 
   return (
-    <div className={className} style={!visibleChild ? { display: 'none' } : undefined}>
+    <div className={className} style={visibleChild ? undefined : { display: 'none' }}>
       {children}
     </div>
   )

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

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  gap: var(--divider-gap);
+  gap: calc(var(--divider-gap) / 2);
   padding: var(--panel-margin);
 
   .im-c-button-wrapper--wide {
@@ -22,6 +22,6 @@
 
 .im-o-app--tablet, .im-o-app--desktop {
   .im-c-actions {
-    min-width: 280px;
+    min-width: 0;
   }
 }

package/src/App/components/KeyboardHelp/KeyboardHelp.jsx

@@ -1,11 +1,13 @@
 // src/components/KeyboardHelp.jsx
 import React from 'react'
+import { useConfig } from '../../store/configContext'
 import { getKeyboardShortcuts } from '../../registry/keyboardShortcutRegistry.js'
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
 export const KeyboardHelp = () => {
-  const groups = getKeyboardShortcuts().reduce((acc, shortcut) => {
+  const appConfig = useConfig()
+  const groups = getKeyboardShortcuts(appConfig).reduce((acc, shortcut) => {
     acc[shortcut.group] = acc[shortcut.group] || []
     acc[shortcut.group].push(shortcut)
     return acc

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

@@ -3,12 +3,21 @@ import React from 'react'
 import { render, screen, within } from '@testing-library/react'
 import { KeyboardHelp } from './KeyboardHelp'
 import { getKeyboardShortcuts } from '../../registry/keyboardShortcutRegistry.js'
+import { useConfig } from '../../store/configContext'
 
 jest.mock('../../registry/keyboardShortcutRegistry.js', () => ({
   getKeyboardShortcuts: jest.fn()
 }))
 
+jest.mock('../../store/configContext', () => ({
+  useConfig: jest.fn()
+}))
+
 describe('KeyboardHelp', () => {
+  beforeEach(() => {
+    useConfig.mockReturnValue({})
+  })
+
   afterEach(() => {
     jest.clearAllMocks()
   })

package/src/App/components/Logo/Logo.jsx

@@ -7,7 +7,7 @@ export const Logo = () => {
   const { mapStyle } = useMap()
 
   if (!mapStyle?.logo) {
-    return
+    return undefined
   }
 
   return (

package/src/App/components/MapButton/MapButton.jsx

@@ -1,13 +1,169 @@
 // components/MapButton.jsx
+import React, { useState, useRef } from 'react'
 import { stringToKebab } from '../../../utils/stringToKebab'
 import { Tooltip } from '../Tooltip/Tooltip'
 import { Icon } from '../Icon/Icon'
 import { SlotRenderer } from '../../renderer/SlotRenderer'
+import { PopupMenu } from '../PopupMenu/PopupMenu'
 import { useConfig } from '../../store/configContext'
 import { useApp } from '../../store/appContext'
 
-// eslint-disable-next-line camelcase, react/jsx-pascal-case
-// sonarjs/disable-next-line function-name
+/**
+ * Builds CSS class names for the map button element.
+ * @param {string} buttonId - Unique identifier for the button (kebab-cased)
+ * @param {string} variant - Visual variant of the button (e.g., 'primary', 'secondary')
+ * @param {boolean} showLabel - Whether the button label is displayed
+ * @returns {string} Space-separated CSS class names
+ */
+const buildButtonClassNames = (buttonId, variant, showLabel) => [
+  'im-c-map-button',
+  buttonId && `im-c-map-button--${stringToKebab(buttonId)}`,
+  variant && `im-c-map-button--${variant}`,
+  showLabel && 'im-c-map-button--with-label'
+].filter(Boolean).join(' ')
+
+/**
+ * Builds CSS class names for the wrapper div that contains the button.
+ * @param {string} buttonId - Unique identifier for the button
+ * @param {boolean} showLabel - Whether the button label is displayed
+ * @param {boolean} groupStart - Whether this button is at the start of a button group
+ * @param {boolean} groupMiddle - Whether this button is in the middle of a button group
+ * @param {boolean} groupEnd - Whether this button is at the end of a button group
+ * @returns {string} Space-separated CSS class names for the wrapper
+ */
+const buildWrapperClassNames = (buttonId, showLabel, groupStart, groupMiddle, groupEnd) => [
+  'im-c-button-wrapper',
+  buttonId && `im-c-button-wrapper--${stringToKebab(buttonId)}`,
+  showLabel && 'im-c-button-wrapper--wide',
+  groupStart && 'im-c-button-wrapper--group-start',
+  groupMiddle && 'im-c-button-wrapper--group-middle',
+  groupEnd && 'im-c-button-wrapper--group-end'
+].filter(Boolean).join(' ')
+
+/**
+ * Handles spacebar key presses on anchor links by triggering a click event.
+ * This ensures anchor buttons behave like standard buttons when spacebar is pressed.
+ * @param {KeyboardEvent} e - The keyboard event
+ */
+const handleKeyUp = (e) => {
+  if (e.key === ' ' || e.key === 'Spacebar') {
+    e.preventDefault()
+    e.currentTarget.click()
+  }
+}
+
+/**
+ * Determines the controlled element (panel or popup menu) for ARIA attributes.
+ * @param {Object} options - Configuration options
+ * @param {string} options.idPrefix - Prefix for generated IDs
+ * @param {string} options.panelId - ID of the controlled panel (if applicable)
+ * @param {string} options.buttonId - Unique button identifier
+ * @param {boolean} options.hasMenu - Whether the button has a popup menu
+ * @returns {Object|null} Object with id and type ('panel' or 'popup'), or null if no controlled element
+ */
+const getControlledElement = ({ idPrefix, panelId, buttonId, hasMenu }) => {
+  if (panelId) {
+    return { id: `${idPrefix}-panel-${stringToKebab(panelId)}`, type: 'panel' }
+  }
+  if (hasMenu) {
+    return { id: `${idPrefix}-popup-${stringToKebab(buttonId)}`, type: 'popup' }
+  }
+  return null
+}
+
+/**
+ * Builds the complete props object for a button or anchor element.
+ * Handles ARIA attributes, event handlers, refs, and conditional styling.
+ * @param {Object} options - Configuration options
+ * @param {string} options.appId - Application identifier
+ * @param {string} options.buttonId - Unique button identifier
+ * @param {string} options.className - CSS classes for the button
+ * @param {Function} options.onClick - Click event handler
+ * @param {Function} options.onKeyUp - Key up event handler
+ * @param {Object} options.buttonRefs - React ref object for storing button references
+ * @param {boolean} options.isDisabled - Whether the button is disabled
+ * @param {boolean} options.isPressed - Whether the button is in pressed state
+ * @param {boolean} options.isExpanded - Whether content controlled by button is expanded
+ * @param {boolean} options.isPanelOpen - Whether the controlled panel is open
+ * @param {boolean} options.isPopupOpen - Whether the popup menu is open
+ * @param {Object|null} options.controlledElement - The element controlled by this button
+ * @param {string} options.href - URL for anchor element (if provided, renders as <a> instead of <button>)
+ * @returns {Object} Props object suitable for button or anchor element
+ */
+const buildButtonProps = ({
+  appId,
+  buttonId,
+  className,
+  onClick,
+  onKeyUp,
+  buttonRefs,
+  isDisabled,
+  isPressed,
+  isExpanded,
+  isPanelOpen,
+  isPopupOpen,
+  controlledElement,
+  href
+}) => {
+  let ariaExpanded
+  if (controlledElement?.type === 'panel') {
+    ariaExpanded = String(isPanelOpen)
+  } else if (controlledElement?.type === 'popup') {
+    ariaExpanded = isPopupOpen
+  } else if (typeof isExpanded === 'boolean') {
+    ariaExpanded = isExpanded
+  } else {
+    // No action
+  }
+
+  return {
+    id: `${appId}-${stringToKebab(buttonId)}`,
+    className,
+    onClick,
+    onKeyUp,
+    ref: (el) => {
+      if (buttonRefs.current && buttonId) {
+        buttonRefs.current[buttonId] = el
+      }
+    },
+    'aria-disabled': isDisabled || undefined,
+    'aria-expanded': ariaExpanded,
+    'aria-pressed': typeof isPressed === 'boolean' ? isPressed : undefined,
+    'aria-controls': controlledElement?.id,
+    'aria-haspopup': controlledElement?.type === 'popup' || undefined,
+    ...(href
+      ? { href, target: '_blank', onKeyUp: handleKeyUp, role: 'button' }
+      : { type: 'button' })
+  }
+}
+
+/**
+ * MapButton component - A versatile button for map applications.
+ * Supports icons, labels, popups, panels, tooltips, and button grouping.
+ * Renders as either a <button> or <a> element depending on props.
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} props.buttonId - Unique identifier for the button
+ * @param {string} [props.iconId] - Icon identifier to display
+ * @param {string} [props.iconSvgContent] - SVG content as an alternative to iconId
+ * @param {string} props.label - Button label/tooltip text
+ * @param {boolean} [props.showLabel=false] - Whether to display the label visually
+ * @param {boolean} [props.isDisabled=false] - Whether the button is disabled
+ * @param {boolean} [props.isPressed] - Whether the button is in pressed state (aria-pressed)
+ * @param {boolean} [props.isExpanded] - Whether content controlled by the button is expanded
+ * @param {boolean} [props.isHidden=false] - Whether to hide the button (CSS display: none)
+ * @param {boolean} [props.isPanelOpen=false] - Whether the controlled panel is open
+ * @param {string} [props.variant] - CSS variant class for styling (e.g., 'primary')
+ * @param {Function} [props.onClick] - Custom click handler
+ * @param {string} [props.panelId] - ID of the panel controlled by this button
+ * @param {Array<Object>} [props.menuItems] - Array of items for popup menu
+ * @param {string} [props.idPrefix=''] - Prefix for generated panel/popup IDs
+ * @param {string} [props.href] - URL for anchor element; if provided, renders as <a> instead of <button>
+ * @param {boolean} [props.groupStart=false] - Whether button is at start of button group
+ * @param {boolean} [props.groupMiddle=false] - Whether button is in middle of button group
+ * @param {boolean} [props.groupEnd=false] - Whether button is at end of button group
+ * @returns {JSX.Element} The rendered button component
+ */
 export const MapButton = ({
   buttonId,
   iconId,
@@ -15,13 +171,14 @@ export const MapButton = ({
   label,
   showLabel,
   isDisabled,
-  isExpanded,
   isPressed,
+  isExpanded,
   isHidden,
-  isOpen,
+  isPanelOpen,
   variant,
   onClick,
   panelId,
+  menuItems,
   idPrefix,
   href,
   groupMiddle,
@@ -30,42 +187,65 @@ export const MapButton = ({
 }) => {
   const { id: appId } = useConfig()
   const { buttonRefs } = useApp()
-
-  const buttonClassNames = [
-    'im-c-map-button',
-    buttonId && `im-c-map-button--${stringToKebab(buttonId)}`,
-    variant && `im-c-map-button--${variant}`,
-    showLabel && 'im-c-map-button--with-label'
-  ].filter(Boolean).join(' ')
+  const [isPopupOpen, setIsPopupOpen] = useState(false)
+  const [menuStartPos, setMenuStartPos] = useState(null)
+  const menuRef = useRef(null)
 
   const Element = href ? 'a' : 'button'
+  const hasMenu = menuItems?.length >= 1
+  const controlledElement = getControlledElement({ idPrefix, panelId, buttonId, hasMenu })
 
-  const handleKeyUp = (e) => {
-    if (e.key === ' ' || e.key === 'Spacebar') {
-      e.preventDefault() // prevent page scrolling
-      e.currentTarget.click() // trigger click
+  /**
+   * Handles button click events.
+   * Toggles popup menu visibility if the button controls a popup.
+   * Calls the custom onClick handler if provided.
+   * @param {React.MouseEvent} e - The click event
+   */
+  const handleButtonClick = (e) => {
+    if (isDisabled) {
+      return
+    }
+    if (controlledElement?.type === 'popup') {
+      const isKeyboard = e.nativeEvent.pointerType === ''
+      /* istanbul ignore next as pointerType can't be tested in jest */
+      setMenuStartPos(isKeyboard ? 'first' : null)
+      setIsPopupOpen((prev) => !prev)
+    }
+    if (onClick) {
+      onClick(e)
     }
   }
 
-  const buttonProps = {
-    id: `${appId}-${stringToKebab(buttonId)}`,
-    className: buttonClassNames,
-    onClick,
-    ref: (el) => {
-      if (buttonRefs.current && buttonId) {
-        buttonRefs.current[buttonId] = el
-      }
-    },
-    'aria-disabled': isDisabled || undefined,
-    'aria-expanded': typeof isExpanded === 'boolean' ? isExpanded : undefined,
-    'aria-pressed': panelId ? String(isOpen) : isPressed,
-    'aria-controls': panelId ? `${idPrefix}-panel-${stringToKebab(panelId)}` : undefined,
-    ...(href
-      ? { href, target: '_blank', onKeyUp: handleKeyUp, role: 'button' } // only <a>
-      : { type: 'button' } // only <button>
-    )
+  /**
+   * Handles key up events on buttons that control popup menus.
+   * ArrowDown opens the menu at the first item.
+   * ArrowUp opens the menu at the last item.
+   * @param {React.KeyboardEvent} e - The keyboard event
+   */
+  const handleButtonKeyUp = e => {
+    if (hasMenu && ['ArrowDown', 'ArrowUp'].includes(e.key)) {
+      e.preventDefault()
+      setMenuStartPos(e.key === 'ArrowUp' ? 'last' : 'first')
+      setIsPopupOpen(true)
+    }
   }
 
+  const buttonProps = buildButtonProps({
+    appId,
+    buttonId,
+    className: buildButtonClassNames(buttonId, variant, showLabel),
+    onClick: handleButtonClick,
+    onKeyUp: handleButtonKeyUp,
+    buttonRefs,
+    isDisabled,
+    isPressed,
+    isExpanded,
+    isPanelOpen,
+    isPopupOpen,
+    controlledElement,
+    href
+  })
+
   const buttonEl = (
     <Element {...buttonProps}>
       {(iconId || iconSvgContent) && <Icon id={iconId} svgContent={iconSvgContent} />}
@@ -73,18 +253,14 @@ export const MapButton = ({
     </Element>
   )
 
-  const wrapperClassNames = [
-    'im-c-button-wrapper',
-    showLabel && ' im-c-button-wrapper--wide',
-    groupStart && 'im-c-button-wrapper--group-start',
-    groupMiddle && 'im-c-button-wrapper--group-middle',
-    groupEnd && 'im-c-button-wrapper--group-end'
-  ].filter(Boolean).join(' ')
-
   return (
-    <div className={wrapperClassNames} style={isHidden ? { display: 'none' } : undefined}>
+    <div
+      className={buildWrapperClassNames(buttonId, showLabel, groupStart, groupMiddle, groupEnd)}
+      style={isHidden ? { display: 'none' } : undefined}
+    >
       {showLabel ? buttonEl : <Tooltip content={label}>{buttonEl}</Tooltip>}
       {panelId && <SlotRenderer slot={`${stringToKebab(buttonId)}-button`} />}
+      {isPopupOpen && <PopupMenu popupMenuId={controlledElement.id} buttonId={buttonId} startPos={menuStartPos} menuRef={menuRef} items={menuItems} setIsOpen={setIsPopupOpen} />}
     </div>
   )
 }