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

package/plugins/interact/src/hooks/useHighlightSync.test.js

@@ -23,7 +23,7 @@ describe('useHighlightSync', () => {
       },
       mapStyle: { id: 'default-style' },
       pluginState: {
-        dataLayers: [{ layerId: 'layer1' }]
+        layers: [{ layerId: 'layer1' }]
       },
       selectedFeatures: [],
       dispatch: jest.fn(),
@@ -93,21 +93,21 @@ describe('useHighlightSync', () => {
     )
   })
 
-  it('rebuilds styles when dataLayers change', () => {
+  it('rebuilds styles when layers change', () => {
     mockDeps.selectedFeatures = [{ featureId: 'F1' }]
 
     const { rerender } = renderHook(
-      ({ dataLayers }) =>
+      ({ layers }) =>
         useHighlightSync({
           ...mockDeps,
-          pluginState: { dataLayers }
+          pluginState: { layers }
         }),
-      { initialProps: { dataLayers: [{ layerId: 'layer1' }] } }
+      { initialProps: { layers: [{ layerId: 'layer1' }] } }
     )
 
     buildStylesMap.mockClear()
 
-    rerender({ dataLayers: [{ layerId: 'layer1' }, { layerId: 'layer2' }] })
+    rerender({ layers: [{ layerId: 'layer1' }, { layerId: 'layer2' }] })
 
     expect(buildStylesMap).toHaveBeenCalled()
   })

package/plugins/interact/src/hooks/useHoverCursor.js

@@ -0,0 +1,10 @@
+import { useEffect } from 'react'
+
+export const useHoverCursor = (mapProvider, enabled, interactionModes, layers) => {
+  useEffect(() => {
+    const canSelect = enabled && interactionModes?.includes('selectFeature')
+    const layerIds = canSelect ? layers.map(l => l.layerId) : []
+    mapProvider.setHoverCursor?.(layerIds)
+    return () => mapProvider.setHoverCursor?.([])
+  }, [enabled, interactionModes, layers])
+}

package/plugins/interact/src/hooks/useHoverCursor.test.js

@@ -0,0 +1,44 @@
+import { renderHook } from '@testing-library/react'
+import { useHoverCursor } from './useHoverCursor.js'
+
+const makeProvider = () => ({ setHoverCursor: jest.fn() })
+
+describe('useHoverCursor', () => {
+  const dataLayers = [{ layerId: 'layer-a' }, { layerId: 'layer-b' }]
+
+  it('calls setHoverCursor with layer IDs when enabled with selectFeature mode', () => {
+    const mapProvider = makeProvider()
+    renderHook(() => useHoverCursor(mapProvider, true, ['selectFeature'], dataLayers))
+    expect(mapProvider.setHoverCursor).toHaveBeenCalledWith(['layer-a', 'layer-b'])
+  })
+
+  it('calls setHoverCursor with layer IDs when selectFeature is combined with other interactionModes', () => {
+    const mapProvider = makeProvider()
+    renderHook(() => useHoverCursor(mapProvider, true, ['selectMarker', 'selectFeature'], dataLayers))
+    expect(mapProvider.setHoverCursor).toHaveBeenCalledWith(['layer-a', 'layer-b'])
+  })
+
+  it('calls setHoverCursor with empty array when disabled', () => {
+    const mapProvider = makeProvider()
+    renderHook(() => useHoverCursor(mapProvider, false, ['selectFeature'], dataLayers))
+    expect(mapProvider.setHoverCursor).toHaveBeenCalledWith([])
+  })
+
+  it('calls setHoverCursor with empty array when selectFeature is not in interactionModes', () => {
+    const mapProvider = makeProvider()
+    renderHook(() => useHoverCursor(mapProvider, true, ['selectMarker', 'placeMarker'], dataLayers))
+    expect(mapProvider.setHoverCursor).toHaveBeenCalledWith([])
+  })
+
+  it('clears cursor on unmount', () => {
+    const mapProvider = makeProvider()
+    const { unmount } = renderHook(() => useHoverCursor(mapProvider, true, ['selectFeature'], dataLayers))
+    mapProvider.setHoverCursor.mockClear()
+    unmount()
+    expect(mapProvider.setHoverCursor).toHaveBeenCalledWith([])
+  })
+
+  it('does not throw when setHoverCursor is absent', () => {
+    expect(() => renderHook(() => useHoverCursor({}, true, ['selectFeature'], dataLayers))).not.toThrow()
+  })
+})

package/plugins/interact/src/hooks/useInteractionHandlers.js

@@ -1,8 +1,42 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { isContiguousWithAny, canSplitFeatures, areAllContiguous } from '../utils/spatial.js'
 import { getFeaturesAtPoint, findMatchingFeature, buildLayerConfigMap } from '../utils/featureQueries.js'
+import { scaleFactor } from '../../../../src/config/appConfig.js'
+
+/**
+ * Returns the id of the first DOM marker whose visual bounds contain the given point.
+ *
+ * MAP_CLICK point is container-relative; getBoundingClientRect is viewport-relative.
+ * We convert by subtracting the parent element's top-left (markers share a parent with
+ * the map container, so parentElement.getBoundingClientRect() gives the offset).
+ *
+ * @param {Object} markers - markers object from mapState (has .items and .markerRefs)
+ * @param {{ x: number, y: number }} point - container-relative pixel coordinates
+ * @param {number} scale - scaleFactor for the current mapSize (e.g. 1.5 for medium)
+ * @returns {string|null}
+ */
+const findMarkerAtPoint = (markers, point, scale) => {
+  for (const marker of markers.items) {
+    const el = markers.markerRefs?.get(marker.id)
+    if (!el) {
+      continue
+    }
+    const parent = el.parentElement
+    const parentRect = parent ? parent.getBoundingClientRect() : { left: 0, top: 0 }
+    const { left, top, right, bottom } = el.getBoundingClientRect()
+    const scaledX = point.x * scale
+    const scaledY = point.y * scale
+    if (
+      scaledX >= left - parentRect.left && scaledX <= right - parentRect.left &&
+      scaledY >= top - parentRect.top && scaledY <= bottom - parentRect.top
+    ) {
+      return marker.id
+    }
+  }
+  return null
+}
 
-const useSelectionChangeEmitter = (eventBus, selectedFeatures, selectionBounds) => {
+const useSelectionChangeEmitter = (eventBus, selectedFeatures, selectedMarkers, selectionBounds) => {
   const lastEmittedSelectionChange = useRef(null)
 
   useEffect(() => {
@@ -14,105 +48,113 @@ const useSelectionChangeEmitter = (eventBus, selectedFeatures, selectionBounds)
 
     // Skip if selection was already empty and remains empty
     const prev = lastEmittedSelectionChange.current
-    const wasEmpty = prev === null || prev.length === 0
-    if (wasEmpty && selectedFeatures.length === 0) {
+    const wasEmpty = prev === null || (prev.features.length === 0 && prev.markers.length === 0)
+    if (wasEmpty && selectedFeatures.length === 0 && selectedMarkers.length === 0) {
       return
     }
 
     eventBus.emit('interact:selectionchange', {
       selectedFeatures,
+      selectedMarkers,
       selectionBounds,
       canMerge: areAllContiguous(selectedFeatures),
       canSplit: canSplitFeatures(selectedFeatures)
     })
 
-    lastEmittedSelectionChange.current = selectedFeatures
-  }, [selectedFeatures, selectionBounds])
+    lastEmittedSelectionChange.current = { features: selectedFeatures, markers: selectedMarkers }
+  }, [selectedFeatures, selectedMarkers, selectionBounds])
 }
 
-export const useInteractionHandlers = ({
-  mapState,
-  pluginState,
-  services,
-  mapProvider
-}) => {
-  const { markers } = mapState
-  const { dispatch, dataLayers, interactionMode, multiSelect, contiguous, markerColor, tolerance, selectedFeatures, selectionBounds, deselectOnClickOutside } = pluginState
+/**
+ * Core interaction hook. Processes map clicks in fixed priority order:
+ * selectMarker → selectFeature → placeMarker (fallback).
+ *
+ * Which steps are active is controlled by `pluginState.interactionModes`. Steps not
+ * present in the array are skipped entirely — e.g. omitting `'selectMarker'` means
+ * marker hit-testing is never performed.
+ *
+ * @param {Object} deps
+ * @param {Object} deps.mapState - Map state including markers and mapSize
+ * @param {Object} deps.pluginState - Plugin state including interactionModes, layers, etc.
+ * @param {Object} deps.services - Services including eventBus
+ * @param {Object} deps.mapProvider - Map provider instance for feature queries
+ * @returns {{ handleInteraction: Function }}
+ */
+export const useInteractionHandlers = ({ mapState, pluginState, services, mapProvider }) => {
+  const { markers, mapSize } = mapState
+  const { dispatch, layers, interactionModes, multiSelect, contiguous, marker: markerOptions, tolerance, selectedFeatures, selectedMarkers, selectionBounds, deselectOnClickOutside } = pluginState
   const { eventBus } = services
-  const layerConfigMap = buildLayerConfigMap(dataLayers)
-
-  const handleInteraction = useCallback(({ point, coords }) => {
-    const allFeatures = getFeaturesAtPoint(mapProvider, point, { radius: tolerance })
-    const hasDataLayers = dataLayers.length > 0
-
-    if (pluginState?.debug) {
-      console.log(`--- Features at ${coords} ---`, allFeatures)
+  const layerConfigMap = buildLayerConfigMap(layers)
+  const scale = scaleFactor[mapSize] ?? 1
+  const processFeatureMatch = useCallback(({ feature, config }) => {
+    markers.remove('location')
+    const isNewContiguous = contiguous && isContiguousWithAny(feature, selectedFeatures)
+    const featureId = feature.properties?.[config.idProperty] ?? feature.id
+    if (featureId == null) {
+      return
     }
+    dispatch({
+      type: 'TOGGLE_SELECTED_FEATURES',
+      payload: {
+        featureId,
+        multiSelect,
+        layerId: config.layerId,
+        idProperty: config.idProperty,
+        properties: feature.properties,
+        geometry: feature.geometry,
+        replaceAll: contiguous && !isNewContiguous
+      }
+    })
+  }, [markers, contiguous, selectedFeatures, dispatch, multiSelect])
 
-    const canMatch = hasDataLayers && (interactionMode === 'select' || interactionMode === 'auto')
-    const match = canMatch ? findMatchingFeature(allFeatures, layerConfigMap) : null
-
-    // 1. Handle Feature Match
-    if (match) {
-      processFeatureMatch(match)
+  const processFallback = useCallback(({ coords }) => {
+    const canPlace = interactionModes.includes('placeMarker')
+    if (!canPlace && !deselectOnClickOutside) {
       return
     }
-
-    // 2. Handle Marker Mode (Fallback)
-    const isMarkerMode = interactionMode === 'marker' || (interactionMode === 'auto' && hasDataLayers)
-    if (isMarkerMode) {
-      dispatch({ type: 'CLEAR_SELECTED_FEATURES' })
-      markers.add('location', coords, { color: markerColor })
+    dispatch({ type: 'CLEAR_SELECTED_FEATURES' })
+    if (canPlace) {
+      markers.add('location', coords, markerOptions)
       eventBus.emit('interact:markerchange', { coords })
-    } else if (deselectOnClickOutside) {
-      dispatch({ type: 'CLEAR_SELECTED_FEATURES' })
-    } else {
-      // No action
     }
+  }, [interactionModes, dispatch, markers, markerOptions, eventBus, deselectOnClickOutside])
 
-    // Internal helper to keep complexity low
-    function processFeatureMatch ({ feature, config }) {
-      markers.remove('location')
-      const isNewContiguous = contiguous && isContiguousWithAny(feature, selectedFeatures)
-      const featureId = feature.properties?.[config.idProperty] ?? feature.id
-
-      if (!featureId) {
+  const handleInteraction = useCallback(({ point, coords }) => {
+    if (interactionModes.includes('selectMarker')) {
+      const markerHit = findMarkerAtPoint(markers, point, scale)
+      if (markerHit) {
+        dispatch({ type: 'TOGGLE_SELECTED_MARKERS', payload: { markerId: markerHit, multiSelect } })
         return
       }
+    }
 
-      dispatch({
-        type: 'TOGGLE_SELECTED_FEATURES',
-        payload: {
-          featureId,
-          multiSelect,
-          layerId: config.layerId,
-          idProperty: config.idProperty,
-          properties: feature.properties,
-          geometry: feature.geometry,
-          replaceAll: contiguous && !isNewContiguous
-        }
-      })
+    if (interactionModes.includes('selectFeature') && layers.length > 0) {
+      const allFeatures = getFeaturesAtPoint(mapProvider, point, { radius: tolerance })
+      if (pluginState?.debug) {
+        console.log(`--- Features at ${coords} ---`, allFeatures)
+      }
+      const match = findMatchingFeature(allFeatures, layerConfigMap)
+      if (match) {
+        processFeatureMatch(match)
+        return
+      }
     }
+
+    processFallback({ coords })
   }, [
     mapProvider,
-    dataLayers,
-    interactionMode,
+    layers,
+    interactionModes,
     multiSelect,
-    eventBus,
     dispatch,
     markers,
-    contiguous,
-    selectedFeatures,
     layerConfigMap,
     pluginState?.debug,
     tolerance,
-    markerColor,
-    deselectOnClickOutside
+    processFeatureMatch,
+    processFallback,
+    scale
   ])
-
-  useSelectionChangeEmitter(eventBus, selectedFeatures, selectionBounds)
-
-  return {
-    handleInteraction
-  }
+  useSelectionChangeEmitter(eventBus, selectedFeatures, selectedMarkers, selectionBounds)
+  return { handleInteraction }
 }

package/plugins/interact/src/hooks/useInteractionHandlers.test.js

@@ -30,19 +30,27 @@ const click = result =>
     })
   )
 
-const setup = (pluginOverrides = {}) => {
+const makeMarkerEl = (rect) => ({
+  getBoundingClientRect: () => rect,
+  parentElement: {
+    getBoundingClientRect: () => ({ left: 0, top: 0 })
+  }
+})
+
+const setup = (pluginOverrides = {}, markerItems = [], markerRefs = new Map()) => {
   const deps = {
     mapState: {
-      markers: { add: jest.fn(), remove: jest.fn() }
+      markers: { add: jest.fn(), remove: jest.fn(), items: markerItems, markerRefs }
     },
     pluginState: {
       dispatch: jest.fn(),
-      dataLayers: [{ layerId: 'parcels', idProperty: 'parcelId' }],
-      interactionMode: 'select',
+      layers: [{ layerId: 'parcels', idProperty: 'parcelId' }],
+      interactionModes: ['selectMarker', 'selectFeature'],
       multiSelect: false,
       contiguous: false,
-      markerColor: 'red',
+      marker: { symbol: 'pin', backgroundColor: 'red' },
       selectedFeatures: [],
+      selectedMarkers: [],
       selectionBounds: null,
       ...pluginOverrides
     },
@@ -73,12 +81,94 @@ beforeEach(() => {
 })
 
 /* ------------------------------------------------------------------ */
-/* Marker mode                                                        */
+/* DOM marker hit detection                                           */
+/* ------------------------------------------------------------------ */
+
+describe('DOM marker hit detection', () => {
+  it('dispatches TOGGLE_SELECTED_MARKERS when click is within a marker bounds', () => {
+    const markerEl = makeMarkerEl({ left: 5, top: 15, right: 15, bottom: 25 })
+    const markerRefs = new Map([['marker-1', markerEl]])
+    const markerItems = [{ id: 'marker-1', coords: [1, 2] }]
+
+    const { result, deps } = setup({}, markerItems, markerRefs)
+    click(result)
+
+    expect(deps.pluginState.dispatch).toHaveBeenCalledWith({
+      type: 'TOGGLE_SELECTED_MARKERS',
+      payload: { markerId: 'marker-1', multiSelect: false }
+    })
+  })
+
+  it('markers take precedence over features when both hit', () => {
+    const markerEl = makeMarkerEl({ left: 5, top: 15, right: 15, bottom: 25 })
+    const markerRefs = new Map([['marker-1', markerEl]])
+    const markerItems = [{ id: 'marker-1', coords: [1, 2] }]
+
+    const { result, deps } = setup({}, markerItems, markerRefs)
+    click(result)
+
+    expect(deps.pluginState.dispatch).not.toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'TOGGLE_SELECTED_FEATURES' })
+    )
+    expect(featureQueries.getFeaturesAtPoint).not.toHaveBeenCalled()
+  })
+
+  it('skips markers with no ref and continues to next', () => {
+    // marker in items but not in markerRefs — should not throw, should fall through to features
+    const markerItems = [{ id: 'marker-no-ref', coords: [1, 2] }]
+    const markerRefs = new Map() // no entry for marker-no-ref
+
+    const { result, deps } = setup({}, markerItems, markerRefs)
+    click(result)
+
+    expect(featureQueries.getFeaturesAtPoint).toHaveBeenCalled()
+    expect(deps.pluginState.dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'TOGGLE_SELECTED_FEATURES' })
+    )
+  })
+
+  it('uses zero offset when marker element has no parentElement', () => {
+    // parentElement is null — fallback parentRect { left: 0, top: 0 } should be used
+    const markerEl = {
+      getBoundingClientRect: () => ({ left: 5, top: 15, right: 15, bottom: 25 }),
+      parentElement: null
+    }
+    const markerRefs = new Map([['marker-1', markerEl]])
+    const markerItems = [{ id: 'marker-1', coords: [1, 2] }]
+
+    const { result, deps } = setup({}, markerItems, markerRefs)
+    click(result)
+
+    // click point { x: 10, y: 20 } is within [5,15,15,25] with zero parent offset
+    expect(deps.pluginState.dispatch).toHaveBeenCalledWith({
+      type: 'TOGGLE_SELECTED_MARKERS',
+      payload: { markerId: 'marker-1', multiSelect: false }
+    })
+  })
+
+  it('falls through to feature selection when click misses all markers', () => {
+    // marker bounds don't include the click point { x: 10, y: 20 }
+    const markerEl = makeMarkerEl({ left: 50, top: 50, right: 80, bottom: 80 })
+    const markerRefs = new Map([['marker-1', markerEl]])
+    const markerItems = [{ id: 'marker-1', coords: [1, 2] }]
+
+    const { result, deps } = setup({}, markerItems, markerRefs)
+    click(result)
+
+    expect(featureQueries.getFeaturesAtPoint).toHaveBeenCalled()
+    expect(deps.pluginState.dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'TOGGLE_SELECTED_FEATURES' })
+    )
+  })
+})
+
+/* ------------------------------------------------------------------ */
+/* placeMarker mode                                                   */
 /* ------------------------------------------------------------------ */
 
-describe('marker mode', () => {
+describe('placeMarker mode', () => {
   it('places marker, clears selection, and emits event', () => {
-    const { result, deps } = setup({ interactionMode: 'marker' })
+    const { result, deps } = setup({ interactionModes: ['placeMarker'] })
 
     click(result)
 
@@ -88,7 +178,7 @@ describe('marker mode', () => {
     expect(deps.mapState.markers.add).toHaveBeenCalledWith(
       'location',
       [1, 2],
-      { color: 'red' }
+      { symbol: 'pin', backgroundColor: 'red' }
     )
     expect(deps.services.eventBus.emit).toHaveBeenCalledWith(
       'interact:markerchange',
@@ -98,32 +188,30 @@ describe('marker mode', () => {
 })
 
 /* ------------------------------------------------------------------ */
-/* Select & Auto modes                                                */
+/* selectFeature mode                                                 */
 /* ------------------------------------------------------------------ */
 
-describe.each(['select', 'auto'])('%s mode feature selection', mode => {
-  it('dispatches selection for matching feature', () => {
-    const { result, deps } = setup({ interactionMode: mode })
+it('selectFeature mode dispatches selection for matching feature', () => {
+  const { result, deps } = setup({ interactionModes: ['selectFeature'] })
 
-    click(result)
+  click(result)
 
-    expect(deps.pluginState.dispatch).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'TOGGLE_SELECTED_FEATURES',
-        payload: expect.objectContaining({
-          featureId: 'P1',
-          layerId: 'parcels'
-        })
+  expect(deps.pluginState.dispatch).toHaveBeenCalledWith(
+    expect.objectContaining({
+      type: 'TOGGLE_SELECTED_FEATURES',
+      payload: expect.objectContaining({
+        featureId: 'P1',
+        layerId: 'parcels'
       })
-    )
-  })
+    })
+  )
 })
 
-it('falls back to marker in auto mode when no feature found', () => {
+it('falls back to placeMarker when selectFeature finds no match', () => {
   featureQueries.getFeaturesAtPoint.mockReturnValue([])
   featureQueries.findMatchingFeature.mockReturnValue(null)
 
-  const { result, deps } = setup({ interactionMode: 'auto' })
+  const { result, deps } = setup({ interactionModes: ['selectFeature', 'placeMarker'] })
 
   click(result)
 
@@ -248,32 +336,58 @@ describe('deselectOnClickOutside', () => {
 })
 
 /* ------------------------------------------------------------------ */
-/* Marker condition guard (FULL COVERAGE)                             */
+/* placeMarker / selectFeature guards                                 */
 /* ------------------------------------------------------------------ */
 
-it('does NOT place marker in auto mode when no dataLayers exist', () => {
+it('places marker with placeMarker mode even when no layers exist', () => {
   featureQueries.getFeaturesAtPoint.mockReturnValue([])
   featureQueries.findMatchingFeature.mockReturnValue(null)
 
   const { result, deps } = setup({
-    interactionMode: 'auto',
-    dataLayers: []
+    interactionModes: ['selectFeature', 'placeMarker'],
+    layers: []
   })
 
   click(result)
 
+  expect(deps.mapState.markers.add).toHaveBeenCalled()
+})
+
+it('does not place marker when placeMarker is not in interactionModes', () => {
+  featureQueries.getFeaturesAtPoint.mockReturnValue([])
+  featureQueries.findMatchingFeature.mockReturnValue(null)
+
+  const { result, deps } = setup({ interactionModes: ['selectFeature'] })
+
+  click(result)
+
   expect(deps.mapState.markers.add).not.toHaveBeenCalled()
 })
 
+it('does not check markers when selectMarker is not in interactionModes', () => {
+  const markerEl = makeMarkerEl({ left: 5, top: 15, right: 15, bottom: 25 })
+  const markerRefs = new Map([['marker-1', markerEl]])
+  const markerItems = [{ id: 'marker-1', coords: [1, 2] }]
+
+  const { result, deps } = setup({ interactionModes: ['selectFeature'] }, markerItems, markerRefs)
+  click(result)
+
+  expect(deps.pluginState.dispatch).not.toHaveBeenCalledWith(
+    expect.objectContaining({ type: 'TOGGLE_SELECTED_MARKERS' })
+  )
+  expect(featureQueries.getFeaturesAtPoint).toHaveBeenCalled()
+})
+
 /* ------------------------------------------------------------------ */
 /* Selection change event                                             */
 /* ------------------------------------------------------------------ */
 
 it('emits selectionchange once when bounds exist', () => {
   const deps = {
-    mapState: { markers: { add: jest.fn(), remove: jest.fn() } },
+    mapState: { markers: { add: jest.fn(), remove: jest.fn(), items: [], markerRefs: new Map() } },
     pluginState: {
       selectedFeatures: [{ featureId: 'F1' }],
+      selectedMarkers: [],
       selectionBounds: { sw: [0, 0], ne: [1, 1] }
     },
     services: { eventBus: { emit: jest.fn() } },
@@ -286,6 +400,7 @@ it('emits selectionchange once when bounds exist', () => {
     'interact:selectionchange',
     expect.objectContaining({
       selectedFeatures: deps.pluginState.selectedFeatures,
+      selectedMarkers: [],
       selectionBounds: deps.pluginState.selectionBounds,
       canMerge: false,
       canSplit: false
@@ -299,8 +414,8 @@ it('skips emission when selection remains empty after being cleared', () => {
   // 1. First render with a feature (prev is null, emission happens)
   const { rerender } = renderHook(
     ({ features }) => useInteractionHandlers({
-      mapState: { markers: {} },
-      pluginState: { selectedFeatures: features, selectionBounds: { b: 1 } },
+      mapState: { markers: { items: [], markerRefs: new Map() } },
+      pluginState: { selectedFeatures: features, selectedMarkers: [], selectionBounds: { b: 1 } },
       services: { eventBus },
       mapProvider: {}
     }),

package/plugins/interact/src/interact.scss

@@ -21,11 +21,4 @@
 .im-o-app--mobile .im-c-mark-location .im-c-map-button {
     flex: 1 1 auto;
     min-width: fit-content;
-}
-
-// Position touch select button
-.im-c-button-wrapper--select-at-target {
-    position: absolute;
-    bottom: calc(100% + var(--primary-gap));
-    z-index: 0;
 }

package/plugins/interact/src/manifest.js

@@ -16,24 +16,6 @@ export const manifest = {
   },
 
   buttons: [{
-    id: 'selectAtTarget',
-    label: 'Select',
-    iconId: 'select',
-    variant: 'touch',
-    hiddenWhen: ({ appState, pluginState }) => !pluginState.enabled || appState.interfaceType !== 'touch',
-    mobile: {
-      slot: 'actions',
-      showLabel: false
-    },
-    tablet: {
-      slot: 'actions',
-      showLabel: false
-    },
-    desktop: {
-      slot: 'actions',
-      showLabel: false
-    }
-  }, {
     id: 'selectCancel',
     label: 'Back',
     variant: 'tertiary',
@@ -50,6 +32,20 @@ export const manifest = {
       slot: 'actions',
       showLabel: true
     }
+  }, {
+    id: 'selectAtTarget',
+    label: 'Select',
+    variant: 'primary',
+    hiddenWhen: ({ appState, pluginState }) => !pluginState.enabled || appState.interfaceType !== 'touch',
+    mobile: {
+      slot: 'actions'
+    },
+    tablet: {
+      slot: 'actions'
+    },
+    desktop: {
+      slot: 'actions'
+    }
   }, {
     id: 'selectDone',
     label: 'Continue',

package/plugins/interact/src/manifest.test.js

@@ -25,7 +25,9 @@ describe('manifest', () => {
     manifest.buttons.forEach(b => {
       ['mobile', 'tablet', 'desktop'].forEach(dev => {
         expect(b[dev].slot).toBe('actions')
-        expect(typeof b[dev].showLabel).toBe('boolean')
+        if (b[dev].showLabel !== undefined) {
+          expect(typeof b[dev].showLabel).toBe('boolean')
+        }
       })
     })
   })