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

package/providers/maplibre/src/utils/labels.test.js

@@ -5,14 +5,13 @@ import {
   navigateToNextLabel, createMapLabelNavigator
 } from './labels.js'
 
-jest.mock('./spatial.js', () => ({ spatialNavigate: jest.fn() }))
-jest.mock('./calculateLinearTextSize.js', () => ({ calculateLinearTextSize: jest.fn(() => 12) }))
-
 import { spatialNavigate } from './spatial.js'
 import { calculateLinearTextSize } from './calculateLinearTextSize.js'
 
-describe('labels utils', () => {
+jest.mock('./spatial.js', () => ({ spatialNavigate: jest.fn() }))
+jest.mock('./calculateLinearTextSize.js', () => ({ calculateLinearTextSize: jest.fn(() => 12) }))
 
+describe('labels utils', () => {
   test('getGeometryCenter all geometry types', () => {
     expect(getGeometryCenter({ type: 'Point', coordinates: [1, 2] })).toEqual([1, 2])
     expect(getGeometryCenter({ type: 'MultiPoint', coordinates: [[3, 4]] })).toEqual([3, 4])
@@ -30,9 +29,9 @@ describe('labels utils', () => {
     expect(evalInterpolate(['literal', 'x'], 10)).toBe(12)
     expect(() => evalInterpolate(['interpolate', ['linear'], ['get', 'p'], 5, 10], 10)).toThrow()
     const expr = ['interpolate', ['linear'], ['zoom'], 5, 10, 10, 20]
-    expect(evalInterpolate(expr, 3)).toBe(10)    // zoom <= z0
-    expect(evalInterpolate(expr, 7.5)).toBe(15)  // interpolated
-    expect(evalInterpolate(expr, 15)).toBe(20)   // beyond last stop
+    expect(evalInterpolate(expr, 3)).toBe(10) // zoom <= z0
+    expect(evalInterpolate(expr, 7.5)).toBe(15) // interpolated
+    expect(evalInterpolate(expr, 15)).toBe(20) // beyond last stop
   })
 
   test('getHighlightColors', () => {
@@ -77,7 +76,7 @@ describe('labels utils', () => {
 
   test('findClosestLabel: empty → undefined; returns closest; skips farther', () => {
     expect(findClosestLabel([], { x: 0, y: 0 })).toBeUndefined()
-    const labels = [{ x: 2, y: 0 }, { x: 10, y: 0 }]  // closer first → second hits false branch
+    const labels = [{ x: 2, y: 0 }, { x: 10, y: 0 }] // closer first → second hits false branch
     expect(findClosestLabel(labels, { x: 0, y: 0 })).toBe(labels[0])
   })
 
@@ -109,9 +108,12 @@ describe('labels utils', () => {
 
   test('applyHighlight: early returns without feature.layer; applies otherwise', () => {
     const map = {
-      getLayer: jest.fn(), removeLayer: jest.fn(),
+      getLayer: jest.fn(),
+      removeLayer: jest.fn(),
       getSource: jest.fn(() => ({ setData: jest.fn() })),
-      getZoom: jest.fn(() => 10), addLayer: jest.fn(), moveLayer: jest.fn()
+      getZoom: jest.fn(() => 10),
+      addLayer: jest.fn(),
+      moveLayer: jest.fn()
     }
     const state = { highlightLayerId: null, highlightedExpr: null, isDarkStyle: false }
     applyHighlight(map, null, state)
@@ -132,9 +134,9 @@ describe('labels utils', () => {
       currentPixel: { x: 1, y: 1 }, labels: [{ x: 1, y: 1 }]
     })).toBeNull()
     const state = { currentPixel: { x: 0, y: 0 }, labels: [{ x: 0, y: 0 }, { x: 5, y: 5 }] }
-    spatialNavigate.mockReturnValue(-1)  // out of range → use 0
+    spatialNavigate.mockReturnValue(-1) // out of range → use 0
     expect(navigateToNextLabel('ArrowRight', state)).toBe(state.labels[1])
-    spatialNavigate.mockReturnValue(0)   // valid index
+    spatialNavigate.mockReturnValue(0) // valid index
     expect(navigateToNextLabel('ArrowRight', state)).toBe(state.labels[1])
   })
 
@@ -212,7 +214,7 @@ describe('labels utils', () => {
     })
 
     test('initLabelSource skips addSource when source exists; MAP_SET_STYLE triggers re-init', () => {
-      map.getSource.mockReset().mockReturnValue({ setData: jest.fn() })  // source always exists
+      map.getSource.mockReset().mockReturnValue({ setData: jest.fn() }) // source always exists
       const eventBus = { on: jest.fn() }
       createMapLabelNavigator(map, 'light', { MAP_SET_STYLE: 'set-style' }, eventBus)
       expect(map.addSource).not.toHaveBeenCalled()

package/providers/maplibre/src/utils/maplibreFixes.test.js

@@ -63,4 +63,4 @@ describe('applyPreventDefaultFix', () => {
     e.preventDefault()
     expect(spy).toHaveBeenCalled()
   })
-})
+})

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

@@ -30,7 +30,7 @@ const isPointInPolygon = (point, ring) => {
     const intersectX = ((xj - xi) * (py - yi)) / (yj - yi) + xi
 
     if (px < intersectX) {
-      inside = !inside;
+      inside = !inside
     }
   }
   return inside
@@ -43,7 +43,7 @@ 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]))
@@ -52,7 +52,7 @@ const getMinDistToGeometry = (map, point, geometry) => {
       }
     }
   }
-  
+
   if (type === 'Point') {
     const p = getScreenPt(coords)
     minSqDist = (point.x - p.x) ** 2 + (point.y - p.y) ** 2
@@ -117,7 +117,7 @@ export const queryFeatures = (map, point, options = {}) => {
       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)
@@ -126,7 +126,7 @@ export const queryFeatures = (map, point, options = {}) => {
       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
@@ -143,4 +143,4 @@ export const queryFeatures = (map, point, options = {}) => {
     })
     .sort((a, b) => a.score - b.score)
     .map(({ f }) => f)
-}
+}

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

@@ -15,12 +15,12 @@ describe('queryFeatures coverage', () => {
     const cases = [
       { type: 'Point', coords: [0, 0], p: { x: 3, y: 4 } },
       { type: 'LineString', coords: [[0, 0], [10, 0]], p: { x: 5, y: 5 } }, // t=0.5
-      { type: 'LineString', coords: [[0, 0], [0, 0]], p: { x: 1, y: 1 } },   // l2=0
+      { type: 'LineString', coords: [[0, 0], [0, 0]], p: { x: 1, y: 1 } }, // l2=0
       { type: 'LineString', coords: [[0, 0], [10, 0]], p: { x: -5, y: 0 } }, // t<0
       { type: 'MultiPoint', coords: [[0, 0], [10, 10]], p: { x: 1, y: 0 } },
       { type: 'MultiLineString', coords: [[[0, 0], [10, 0]]], p: { x: 5, y: 1 } },
       { type: 'Polygon', coords: [[[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]]], p: { x: 5, y: 5 } }, // Inside
-      { type: 'MultiPolygon', coords: [[[[0, 0], [10, 0], [10, 10], [0, 0]]]], p: { x: 20, y: 20 } },  // Outside
+      { type: 'MultiPolygon', coords: [[[[0, 0], [10, 0], [10, 10], [0, 0]]]], p: { x: 20, y: 20 } }, // Outside
       { type: 'Unknown', coords: [], p: { x: 0, y: 0 } }
     ]
 
@@ -31,21 +31,21 @@ describe('queryFeatures coverage', () => {
     })
 
     // 3. Hits Line 144 (.sort) and property-based ID fallback
-    const f1 = { 
-      properties: { key: 'a' }, 
-      layer: { id: 'layer-A' }, 
-      geometry: { type: 'Point', coordinates: [10, 10] } 
+    const f1 = {
+      properties: { key: 'a' },
+      layer: { id: 'layer-A' },
+      geometry: { type: 'Point', coordinates: [10, 10] }
     }
-    const f2 = { 
-      id: 'b', 
-      layer: { id: 'layer-B' }, 
-      geometry: { type: 'Point', coordinates: [0, 0] } 
+    const f2 = {
+      id: 'b',
+      layer: { id: 'layer-B' },
+      geometry: { type: 'Point', coordinates: [0, 0] }
     }
-    
+
     // map.queryRenderedFeatures returns multiple items to trigger .sort()
     const sortMap = { ...mockMap, queryRenderedFeatures: () => [f1, f2] }
     const result = queryFeatures(sortMap, { x: 0, y: 0 })
-    
+
     expect(result.length).toBe(2)
     expect(result[0].layer.id).toBe('layer-A') // Sorted by layerStack index
 
@@ -57,4 +57,4 @@ describe('queryFeatures coverage', () => {
     const rayMap = { ...mockMap, queryRenderedFeatures: () => [polyFeat] }
     expect(queryFeatures(rayMap, { x: -1, y: 5 }).length).toBe(1)
   })
-})
+})

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

@@ -186,7 +186,6 @@ const getPaddedBounds = (LngLatBounds, map) => {
   return new LngLatBounds(swLngLat, neLngLat)
 }
 
-
 /**
  * Get a flat bbox [west, south, east, north] from any GeoJSON object
  * (Feature, FeatureCollection, or geometry).

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

@@ -10,7 +10,6 @@ jest.mock('geodesy/latlon-spherical.js', () =>
 jest.mock('@turf/bbox', () => jest.fn(() => [-1, 50, 1, 52]))
 
 describe('spatial utils', () => {
-
   test('formatDimension hits all branches', () => {
     // < 0.5 miles
     expect(spatial.formatDimension(500)).toMatch(/m$/)
@@ -43,55 +42,55 @@ describe('spatial utils', () => {
   })
 
   test('north/south/east/west moves', () => {
-    expect(spatial.getCardinalMove([0,0],[0,0.5])).toMatch(/north/)
-    expect(spatial.getCardinalMove([0,0],[0,-0.5])).toMatch(/south/)
-    expect(spatial.getCardinalMove([0,0],[0.5,0])).toMatch(/east/)
-    expect(spatial.getCardinalMove([0,0],[-0.5,0])).toMatch(/west/)
-    expect(spatial.getCardinalMove([0,0],[0.5,0.5])).toMatch(/north.*east|east.*north/)
-    expect(spatial.getCardinalMove([0,0],[0.00001,0.00001])).toBe('')
+    expect(spatial.getCardinalMove([0, 0], [0, 0.5])).toMatch(/north/)
+    expect(spatial.getCardinalMove([0, 0], [0, -0.5])).toMatch(/south/)
+    expect(spatial.getCardinalMove([0, 0], [0.5, 0])).toMatch(/east/)
+    expect(spatial.getCardinalMove([0, 0], [-0.5, 0])).toMatch(/west/)
+    expect(spatial.getCardinalMove([0, 0], [0.5, 0.5])).toMatch(/north.*east|east.*north/)
+    expect(spatial.getCardinalMove([0, 0], [0.00001, 0.00001])).toBe('')
   })
 
   test('spatialNavigate all directions and fallback', () => {
-    const pixels = [[0,0],[0,-1],[1,0],[0,1],[-1,0]]
-    expect(spatial.spatialNavigate('ArrowUp',[0,0],pixels)).toBe(1)
-    expect(spatial.spatialNavigate('ArrowDown',[0,0],pixels)).toBe(3)
-    expect(spatial.spatialNavigate('ArrowLeft',[0,0],pixels)).toBe(4)
-    expect(spatial.spatialNavigate('ArrowRight',[0,0],pixels)).toBe(2)
-    expect(spatial.spatialNavigate('InvalidDir',[0,0],pixels)).toBe(0)
+    const pixels = [[0, 0], [0, -1], [1, 0], [0, 1], [-1, 0]]
+    expect(spatial.spatialNavigate('ArrowUp', [0, 0], pixels)).toBe(1)
+    expect(spatial.spatialNavigate('ArrowDown', [0, 0], pixels)).toBe(3)
+    expect(spatial.spatialNavigate('ArrowLeft', [0, 0], pixels)).toBe(4)
+    expect(spatial.spatialNavigate('ArrowRight', [0, 0], pixels)).toBe(2)
+    expect(spatial.spatialNavigate('InvalidDir', [0, 0], pixels)).toBe(0)
   })
 
   test('spatialNavigate finds closer candidates (hits dist < minDist)', () => {
-    const start = [0,0]
-    const pixels = [[0,0],[10,0],[2,0]] 
+    const start = [0, 0]
+    const pixels = [[0, 0], [10, 0], [2, 0]]
     expect(spatial.spatialNavigate('ArrowRight', start, pixels)).toBe(2)
   })
 
   test('spatialNavigate skips farther candidate (dist >= minDist false branch)', () => {
     // Closer candidate first → second candidate fails dist < minDist
-    const pixels = [[0,0],[2,0],[10,0]]
-    expect(spatial.spatialNavigate('ArrowRight', [0,0], pixels)).toBe(1)
+    const pixels = [[0, 0], [2, 0], [10, 0]]
+    expect(spatial.spatialNavigate('ArrowRight', [0, 0], pixels)).toBe(1)
   })
 
   test('spatialNavigate diagonal with dx>dy', () => {
-    const start = [0,0]
-    const pixels = [[0,0],[3,1],[1,0]] // dx>dy
+    const start = [0, 0]
+    const pixels = [[0, 0], [3, 1], [1, 0]] // dx>dy
     expect(spatial.spatialNavigate('ArrowRight', start, pixels)).toBe(2)
   })
 
   test('getResolution returns positive value', () => {
-    expect(spatial.getResolution({lat:0},1)).toBeGreaterThan(0)
+    expect(spatial.getResolution({ lat: 0 }, 1)).toBeGreaterThan(0)
   })
 
   test('getPaddedBounds returns bounds', () => {
     const map = {
-      getContainer: () => ({ getBoundingClientRect: () => ({ width:100,height:200 }) }),
-      getPadding: () => ({ top:1,right:2,bottom:3,left:4 }),
-      unproject: p => ({ x:p[0], y:p[1] })
+      getContainer: () => ({ getBoundingClientRect: () => ({ width: 100, height: 200 }) }),
+      getPadding: () => ({ top: 1, right: 2, bottom: 3, left: 4 }),
+      unproject: p => ({ x: p[0], y: p[1] })
     }
-    const LngLatBounds = function(sw,ne){
-      return {sw,ne}
+    const LngLatBounds = function (sw, ne) {
+      return { sw, ne }
     }
-    const bounds = spatial.getPaddedBounds(LngLatBounds,map)
+    const bounds = spatial.getPaddedBounds(LngLatBounds, map)
     expect(bounds.sw).toBeDefined()
     expect(bounds.ne).toBeDefined()
   })
@@ -140,4 +139,4 @@ describe('spatial utils', () => {
       expect(map.project).toHaveBeenCalledTimes(4)
     })
   })
-})
+})

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

@@ -7,11 +7,11 @@ export const Actions = ({ children }) => {
   const { openPanels, panelConfig, breakpoint } = useApp()
 
   const childArray = React.Children.toArray(children)
-  const visibleChild = childArray.find(c => c.props?.isHidden === false)
+  const visibleChild = childArray.find(c => c.props?.isHidden === false && c.props?.variant !== 'touch')
 
   // If a panel exists above we need so css adjustment
   const isBottomSlotUsed = Object.keys(openPanels).some(panelId => {
-    return breakpoint === 'mobile' && panelConfig[panelId]?.[breakpoint]?.slot === 'bottom'
+    return breakpoint === 'mobile' && panelConfig[panelId]?.[breakpoint]?.slot === 'drawer'
   })
 
   const className = [

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

@@ -6,19 +6,12 @@
   padding: var(--panel-margin);
   max-height: 200px;
 
-  @media (prefers-reduced-motion: no-preference) {
-    transition: max-height var(--duration) ease, opacity var(--duration) ease,
-      padding-top var(--duration) ease, padding-bottom var(--duration) ease;
-  }
-
   &--border-top {
     border-top: 1px solid var(--app-border-color);
   }
 
   &--hidden {
     max-height: 0;
-    overflow: hidden;
-    opacity: 0;
     padding-top: 0;
     padding-bottom: 0;
     border: 0;

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

@@ -29,7 +29,7 @@ describe('Actions component', () => {
 
   it('adds the border class if a bottom slot panel is open', () => {
     mockUseApp.openPanels = { key: {} }
-    mockUseApp.panelConfig = { key: { mobile: { slot: 'bottom' } } }
+    mockUseApp.panelConfig = { key: { mobile: { slot: 'drawer' } } }
 
     render(<Actions slot='actions'>Content</Actions>)
     const container = screen.getByText('Content').closest('div')

package/src/App/components/Icon/Icon.jsx

@@ -3,8 +3,8 @@ import { getIconRegistry } from '../../registry/iconRegistry.js'
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
-export const Icon = ({ id, svgContent }) => {
-  const icon = getIconRegistry()[id] || svgContent
+export const Icon = ({ id, svgContent, isMenu }) => {
+  const icon = isMenu ? getIconRegistry().chevron : (getIconRegistry()[id] || svgContent)
 
   return (
     <svg
@@ -20,6 +20,7 @@ export const Icon = ({ id, svgContent }) => {
       aria-hidden='true'
       focusable='false'
       dangerouslySetInnerHTML={{ __html: icon }}
+      className={`im-c-icon${isMenu ? ' im-c-icon--narrow' : ''}`}
     />
   )
 }

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

@@ -0,0 +1,4 @@
+.im-c-icon--narrow {
+    margin-left: -3px;
+    margin-right: -3px;
+}

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

@@ -33,27 +33,66 @@ describe('Icon component', () => {
   it('renders the SVG from the registry when id is provided', () => {
     getIconRegistry.mockReturnValue({ close: '<path d="M0 0 L10 10"/>' })
     const { container } = render(<Icon id='close' />)
-    expect(container.querySelector('svg').innerHTML).toContain('<path d="M0 0 L10 10"')
+    expect(container.querySelector('svg').innerHTML)
+      .toContain('<path d="M0 0 L10 10"')
   })
 
   it('falls back to svgContent if id not found in registry', () => {
     getIconRegistry.mockReturnValue({})
     const fallbackSVG = '<circle cx="5" cy="5" r="5"/>'
     const { container } = render(<Icon id='unknown' svgContent={fallbackSVG} />)
-    expect(container.querySelector('svg').innerHTML).toContain('<circle cx="5" cy="5" r="5"')
+    expect(container.querySelector('svg').innerHTML)
+      .toContain('<circle cx="5" cy="5" r="5"')
   })
 
   it('renders svgContent directly if no id provided', () => {
     const fallbackSVG = '<rect x="0" y="0" width="10" height="10"/>'
     getIconRegistry.mockReturnValue({})
     const { container } = render(<Icon svgContent={fallbackSVG} />)
-    expect(container.querySelector('svg').innerHTML).toContain('<rect x="0" y="0" width="10" height="10"')
+    expect(container.querySelector('svg').innerHTML)
+      .toContain('<rect x="0" y="0" width="10" height="10"')
   })
 
   it('uses registry icon if both id and svgContent provided', () => {
     getIconRegistry.mockReturnValue({ check: '<path d="M1 1 L5 5"/>' })
     const fallbackSVG = '<circle cx="5" cy="5" r="5"/>'
     const { container } = render(<Icon id='check' svgContent={fallbackSVG} />)
-    expect(container.querySelector('svg').innerHTML).toContain('<path d="M1 1 L5 5"')
+    expect(container.querySelector('svg').innerHTML)
+      .toContain('<path d="M1 1 L5 5"')
+  })
+
+  it('uses chevron icon when isMenu is true', () => {
+    getIconRegistry.mockReturnValue({
+      chevron: '<path d="M2 2 L8 8"/>',
+      close: '<path d="M0 0 L10 10"/>'
+    })
+    const { container } = render(<Icon id='close' isMenu />)
+    expect(container.querySelector('svg').innerHTML).toContain('<path d="M2 2 L8 8"')
+  })
+
+  it('ignores id and svgContent when isMenu is true', () => {
+    getIconRegistry.mockReturnValue({
+      chevron: '<path d="M2 2 L8 8"/>'
+    })
+    const fallbackSVG = '<circle cx="5" cy="5" r="5"/>'
+    const { container } = render(
+      <Icon id='close' svgContent={fallbackSVG} isMenu />
+    )
+    expect(container.querySelector('svg').innerHTML).toContain('<path d="M2 2 L8 8"')
+  })
+
+  it('adds narrow class when isMenu is true', () => {
+    getIconRegistry.mockReturnValue({
+      chevron: '<path d="M2 2 L8 8"/>'
+    })
+    const { container } = render(<Icon isMenu />)
+    const svg = container.querySelector('svg')
+    expect(svg).toHaveClass('im-c-icon--narrow')
+  })
+
+  it('renders nothing if isMenu is true and chevron is missing', () => {
+    getIconRegistry.mockReturnValue({})
+    const { container } = render(<Icon isMenu />)
+    expect(container.querySelector('svg').innerHTML).toBe('')
   })
 })

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

@@ -46,6 +46,37 @@ const handleKeyUp = (e) => {
   }
 }
 
+const captureMenuRect = (buttonRefs, buttonId, setMenuRect) => {
+  const btn = buttonRefs.current[buttonId]
+  if (!btn) {
+    return
+  }
+  setMenuRect(btn.getBoundingClientRect().toJSON())
+}
+
+/**
+ * Returns a keyup handler for buttons that control a popup menu.
+ * ArrowDown opens the menu at the first item; ArrowUp opens at the last.
+ * @param {boolean} hasMenu - Whether the button has a popup menu
+ * @param {Object} buttonRefs - React ref map of button elements
+ * @param {string} buttonId - Unique button identifier
+ * @param {Function} setMenuStartPos - State setter for menu start position
+ * @param {Function} setMenuRect - State setter for button bounding rect
+ * @param {Function} setIsPopupOpen - State setter for popup open state
+ * @returns {Function} Keyboard event handler
+ */
+const makePopupKeyUpHandler = (hasMenu, buttonRefs, buttonId, setMenuStartPos, setMenuRect, setIsPopupOpen) => (e) => {
+  if (hasMenu && ['ArrowDown', 'ArrowUp'].includes(e.key)) {
+    e.preventDefault()
+    setMenuStartPos(e.key === 'ArrowUp' ? 'last' : 'first')
+    captureMenuRect(buttonRefs, buttonId, setMenuRect)
+    setIsPopupOpen(true)
+  }
+}
+
+const getButtonSlot = (panelId, buttonId) =>
+  panelId ? `${stringToKebab(buttonId)}-button` : undefined
+
 /**
  * Determines the controlled element (panel or popup menu) for ARIA attributes.
  * @param {Object} options - Configuration options
@@ -177,10 +208,13 @@ export const MapButton = ({
   const { buttonRefs } = useApp()
   const [isPopupOpen, setIsPopupOpen] = useState(false)
   const [menuStartPos, setMenuStartPos] = useState(null)
+  const [menuRect, setMenuRect] = useState(null)
   const menuRef = useRef(null)
 
   const Element = href ? 'a' : 'button'
   const hasMenu = menuItems?.length >= 1
+  const showIcon = iconId || iconSvgContent || hasMenu
+  const buttonSlot = getButtonSlot(panelId, buttonId)
   const controlledElement = getControlledElement({ idPrefix, panelId, buttonId, hasMenu })
 
   /**
@@ -197,6 +231,9 @@ export const MapButton = ({
       const isKeyboard = e.nativeEvent.pointerType === ''
       /* istanbul ignore next as pointerType can't be tested in jest */
       setMenuStartPos(isKeyboard ? 'first' : null)
+      if (!isPopupOpen) {
+        captureMenuRect(buttonRefs, buttonId, setMenuRect)
+      }
       setIsPopupOpen((prev) => !prev)
     }
     if (onClick) {
@@ -204,19 +241,7 @@ export const MapButton = ({
     }
   }
 
-  /**
-   * 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 handleButtonKeyUp = makePopupKeyUpHandler(hasMenu, buttonRefs, buttonId, setMenuStartPos, setMenuRect, setIsPopupOpen)
 
   const buttonProps = buildButtonProps({
     appId,
@@ -236,7 +261,7 @@ export const MapButton = ({
 
   const buttonEl = (
     <Element {...buttonProps}>
-      {(iconId || iconSvgContent) && <Icon id={iconId} svgContent={iconSvgContent} />}
+      {showIcon && <Icon id={iconId} svgContent={iconSvgContent} isMenu={hasMenu} />}
       {showLabel && <span>{label}</span>}
     </Element>
   )
@@ -244,12 +269,12 @@ export const MapButton = ({
   return (
     <div
       className={buildWrapperClassNames(buttonId, showLabel)}
-      data-button-slot={panelId ? `${stringToKebab(buttonId)}-button` : undefined}
+      data-button-slot={buttonSlot}
       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} />}
+      {buttonSlot && <SlotRenderer slot={buttonSlot} />}
+      {isPopupOpen && <PopupMenu popupMenuId={controlledElement.id} buttonId={buttonId} startPos={menuStartPos} menuRef={menuRef} items={menuItems} setIsOpen={setIsPopupOpen} buttonRect={menuRect} />}
     </div>
   )
 }

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

@@ -124,19 +124,6 @@
     }
 }
 
-.im-c-map-button--touch {
-    background-color: var(--map-overlay-foreground-color);
-    color: var(--map-overlay-halo-color);
-
-    width: var(--touch-button-size);
-    height: var(--touch-button-size);
-    border-radius: 100%;
-
-    &::before {
-        box-shadow: none;
-    }
-}
-
 .im-o-app__right {
     .im-c-button-group {
         display: flex;
@@ -185,6 +172,10 @@
 }
 
 // 4. State styles
+.im-c-map-button[aria-haspopup="true"][aria-expanded="true"] svg {
+    transform: rotate(180deg);
+}
+
 .im-c-map-button[aria-disabled="true"]:not(.im-c-map-button--primary):not(.im-c-map-button--tertiary) {
     svg, span {
         opacity: var(--disabled-button-opacity);

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

@@ -23,7 +23,7 @@ jest.mock('../../renderer/SlotRenderer', () => ({
 }))
 
 jest.mock('../PopupMenu/PopupMenu', () => ({
-  PopupMenu: ({ startPos, items }) => {
+  PopupMenu: ({ startPos, items, buttonRect }) => {
     let selectedIndex = -1
     if (startPos === 'first' && items?.length > 0) {
       selectedIndex = 0
@@ -31,7 +31,7 @@ jest.mock('../PopupMenu/PopupMenu', () => ({
     if (startPos === 'last' && items?.length > 0) {
       selectedIndex = items.length - 1
     }
-    return <div data-testid='popup-menu' data-start-pos={String(startPos)} data-selected-index={String(selectedIndex)}>{items?.map((item, i) => <div key={i} data-testid={`menu-item-${i}`}>{item.label}</div>)}</div>
+    return <div data-testid='popup-menu' data-start-pos={String(startPos)} data-selected-index={String(selectedIndex)} data-has-rect={String(!!buttonRect)}>{items?.map((item, i) => <div key={i} data-testid={`menu-item-${i}`}>{item.label}</div>)}</div>
   }
 }))
 
@@ -41,7 +41,12 @@ const mockButtonRefs = { current: {} }
 jest.mock('../../store/appContext', () => ({ useApp: () => ({ buttonRefs: mockButtonRefs }) }))
 
 describe('MapButton', () => {
-  beforeEach(() => { mockButtonRefs.current = {} })
+  beforeEach(() => {
+    mockButtonRefs.current = {}
+    Element.prototype.getBoundingClientRect = jest.fn(() => ({
+      toJSON: () => ({ top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0 })
+    }))
+  })
 
   const renderButton = (props = {}) => render(<MapButton buttonId='Test' iconId='icon' label='Label' {...props} />)
   const getButton = () => screen.getByRole('button')
@@ -148,6 +153,19 @@ describe('MapButton', () => {
     expect(menu).toHaveAttribute('data-selected-index', String(expectedIndex))
   })
 
+  it('passes buttonRect to popup menu on open', () => {
+    renderButton({ menuItems: [{ label: 'Item' }] })
+    fireEvent.click(getButton())
+    expect(screen.getByTestId('popup-menu')).toHaveAttribute('data-has-rect', 'true')
+  })
+
+  it('captureMenuRect returns early when buttonRef is not stored', () => {
+    renderButton({ menuItems: [{ label: 'Item' }] })
+    mockButtonRefs.current = {}
+    fireEvent.click(getButton())
+    expect(screen.getByTestId('popup-menu')).toHaveAttribute('data-has-rect', 'false')
+  })
+
   it('does nothing for arrow keys when no menu', () => {
     renderButton()
     fireEvent.keyUp(getButton(), { key: 'ArrowDown' })
@@ -188,4 +206,10 @@ describe('MapButton', () => {
     fireEvent.keyUp(el, { key: 'Enter' })
     expect(spy).not.toHaveBeenCalled()
   })
+
+  it('renders no Icon when iconId, iconSvgContent and menuItems are all absent', () => {
+    render(<MapButton buttonId='Test' label='Label' />)
+    expect(screen.queryByRole('img', { hidden: true })).toBeNull()
+    expect(screen.queryByTestId('icon')).toBeNull()
+  })
 })