@defra/interactive-map 0.0.22-alpha → 0.0.24-alpha

package/plugins/interact/dist/umd/index.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("defra",[],t):"object"==typeof exports?exports.defra=t():(e.defra=e.defra||{},e.defra.interactPlugin=t())}(this,()=>(()=>{"use strict";var e,t,r={738(e){e.exports=preactCompat},287(e){e.exports=preactJsxRuntime}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var i=n[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.m=r,o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce((t,r)=>(o.f[r](e,t),t),[])),o.u=e=>"im-interact-plugin.js",o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="defra.interactPlugin:",o.l=(r,n,i,a)=>{if(e[r])e[r].push(n);else{var c,u;if(void 0!==i)for(var f=document.getElementsByTagName("script"),p=0;p<f.length;p++){var l=f[p];if(l.getAttribute("src")==r||l.getAttribute("data-webpack")==t+i){c=l;break}}c||(u=!0,(c=document.createElement("script")).charset="utf-8",o.nc&&c.setAttribute("nonce",o.nc),c.setAttribute("data-webpack",t+i),c.src=r),e[r]=[n];var s=(t,n)=>{c.onerror=c.onload=null,clearTimeout(b);var o=e[r];if(delete e[r],c.parentNode&&c.parentNode.removeChild(c),o&&o.forEach(e=>e(n)),t)return t(n)},b=setTimeout(s.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=s.bind(null,c.onerror),c.onload=s.bind(null,c.onload),u&&document.head.appendChild(c)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;o.g.importScripts&&(e=o.g.location+"");var t=o.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),o.p=e})(),(()=>{var e={57:0};o.f.j=(t,r)=>{var n=o.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else{var i=new Promise((r,o)=>n=e[t]=[r,o]);r.push(n[2]=i);var a=o.p+o.u(t),c=new Error;o.l(a,r=>{if(o.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var i=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;c.message="Loading chunk "+t+" failed.\n("+i+": "+a+")",c.name="ChunkLoadError",c.type=i,c.request=a,n[1](c)}},"chunk-"+t,t)}};var t=(t,r)=>{var n,i,[a,c,u]=r,f=0;if(a.some(t=>0!==e[t])){for(n in c)o.o(c,n)&&(o.m[n]=c[n]);u&&u(o)}for(t&&t(r);f<a.length;f++)i=a[f],o.o(e,i)&&e[i]&&e[i][0](),e[i]=0},r=this.webpackChunkdefra_DefraMap=this.webpackChunkdefra_DefraMap||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var i={};function a(e){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a(e)}function c(){var e,t,r="function"==typeof Symbol?Symbol:{},n=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,n,o,i){var c=n&&n.prototype instanceof f?n:f,p=Object.create(c.prototype);return u(p,"_invoke",function(r,n,o){var i,c,u,f=0,p=o||[],l=!1,s={p:0,n:0,v:e,a:b,f:b.bind(e,4),d:function(t,r){return i=t,c=0,u=e,s.n=r,a}};function b(r,n){for(c=r,u=n,t=0;!l&&f&&!o&&t<p.length;t++){var o,i=p[t],b=s.p,d=i[2];r>3?(o=d===n)&&(u=i[(c=i[4])?5:(c=3,3)],i[4]=i[5]=e):i[0]<=b&&((o=r<2&&b<i[1])?(c=0,s.v=n,s.n=i[1]):b<d&&(o=r<3||i[0]>n||n>d)&&(i[4]=r,i[5]=n,s.n=d,c=0))}if(o||r>1)return a;throw l=!0,n}return function(o,p,d){if(f>1)throw TypeError("Generator is already running");for(l&&1===p&&b(p,d),c=p,u=d;(t=c<2?e:u)||!l;){i||(c?c<3?(c>1&&(s.n=-1),b(c,u)):s.n=u:s.v=u);try{if(f=2,i){if(c||(o="next"),t=i[o]){if(!(t=t.call(i,u)))throw TypeError("iterator result is not an object");if(!t.done)return t;u=t.value,c<2&&(c=0)}else 1===c&&(t=i.return)&&t.call(i),c<2&&(u=TypeError("The iterator does not provide a '"+o+"' method"),c=1);i=e}else if((t=(l=s.n<0)?u:r.call(n,s))!==a)break}catch(t){i=e,c=1,u=t}finally{f=1}}return{value:t,done:l}}}(r,o,i),!0),p}var a={};function f(){}function p(){}function l(){}t=Object.getPrototypeOf;var s=[][n]?t(t([][n]())):(u(t={},n,function(){return this}),t),b=l.prototype=f.prototype=Object.create(s);function d(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,l):(e.__proto__=l,u(e,o,"GeneratorFunction")),e.prototype=Object.create(b),e}return p.prototype=l,u(b,"constructor",l),u(l,"constructor",p),p.displayName="GeneratorFunction",u(l,o,"GeneratorFunction"),u(b),u(b,o,"Generator"),u(b,n,function(){return this}),u(b,"toString",function(){return"[object Generator]"}),(c=function(){return{w:i,m:d}})()}function u(e,t,r,n){var o=Object.defineProperty;try{o({},"",{})}catch(e){o=0}u=function(e,t,r,n){function i(t,r){u(e,t,function(e){return this._invoke(t,r,e)})}t?o?o(e,t,{value:r,enumerable:!n,configurable:!n,writable:!n}):e[t]=r:(i("next",0),i("throw",1),i("return",2))},u(e,t,r,n)}function f(e,t,r,n,o,i,a){try{var c=e[i](a),u=c.value}catch(e){return void r(e)}c.done?t(u):Promise.resolve(u).then(n,o)}function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach(function(t){s(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function s(e,t,r){return(t=function(e){var t=function(e){if("object"!=a(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=a(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==a(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(){var e,t;return l(l({},arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),{},{id:"interact",load:(e=c().m(function e(){var t;return c().w(function(e){for(;;)switch(e.n){case 0:return e.n=1,o.e(936).then(o.bind(o,456));case 1:return t=e.v.manifest,e.a(2,t)}},e)}),t=function(){var t=this,r=arguments;return new Promise(function(n,o){var i=e.apply(t,r);function a(e){f(i,n,o,a,c,"next",e)}function c(e){f(i,n,o,a,c,"throw",e)}a(void 0)})},function(){return t.apply(this,arguments)})})}return o.d(i,{default:()=>b}),i.default})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("defra",[],t):"object"==typeof exports?exports.defra=t():(e.defra=e.defra||{},e.defra.interactPlugin=t())}(this,()=>(()=>{"use strict";var e,t,r={738(e){e.exports=preactCompat},287(e){e.exports=preactJsxRuntime}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var i=n[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.m=r,o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce((t,r)=>(o.f[r](e,t),t),[])),o.u=e=>"im-interact-plugin.js",o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="defra.interactPlugin:",o.l=(r,n,i,a)=>{if(e[r])e[r].push(n);else{var c,u;if(void 0!==i)for(var f=document.getElementsByTagName("script"),p=0;p<f.length;p++){var l=f[p];if(l.getAttribute("src")==r||l.getAttribute("data-webpack")==t+i){c=l;break}}c||(u=!0,(c=document.createElement("script")).charset="utf-8",o.nc&&c.setAttribute("nonce",o.nc),c.setAttribute("data-webpack",t+i),c.src=r),e[r]=[n];var s=(t,n)=>{c.onerror=c.onload=null,clearTimeout(b);var o=e[r];if(delete e[r],c.parentNode&&c.parentNode.removeChild(c),o&&o.forEach(e=>e(n)),t)return t(n)},b=setTimeout(s.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=s.bind(null,c.onerror),c.onload=s.bind(null,c.onload),u&&document.head.appendChild(c)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;o.g.importScripts&&(e=o.g.location+"");var t=o.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),o.p=e})(),(()=>{var e={57:0};o.f.j=(t,r)=>{var n=o.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else{var i=new Promise((r,o)=>n=e[t]=[r,o]);r.push(n[2]=i);var a=o.p+o.u(t),c=new Error;o.l(a,r=>{if(o.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var i=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;c.message="Loading chunk "+t+" failed.\n("+i+": "+a+")",c.name="ChunkLoadError",c.type=i,c.request=a,n[1](c)}},"chunk-"+t,t)}};var t=(t,r)=>{var n,i,[a,c,u]=r,f=0;if(a.some(t=>0!==e[t])){for(n in c)o.o(c,n)&&(o.m[n]=c[n]);u&&u(o)}for(t&&t(r);f<a.length;f++)i=a[f],o.o(e,i)&&e[i]&&e[i][0](),e[i]=0},r=this.webpackChunkdefra_DefraMap=this.webpackChunkdefra_DefraMap||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var i={};function a(e){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a(e)}function c(){var e,t,r="function"==typeof Symbol?Symbol:{},n=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,n,o,i){var c=n&&n.prototype instanceof f?n:f,p=Object.create(c.prototype);return u(p,"_invoke",function(r,n,o){var i,c,u,f=0,p=o||[],l=!1,s={p:0,n:0,v:e,a:b,f:b.bind(e,4),d:function(t,r){return i=t,c=0,u=e,s.n=r,a}};function b(r,n){for(c=r,u=n,t=0;!l&&f&&!o&&t<p.length;t++){var o,i=p[t],b=s.p,d=i[2];r>3?(o=d===n)&&(u=i[(c=i[4])?5:(c=3,3)],i[4]=i[5]=e):i[0]<=b&&((o=r<2&&b<i[1])?(c=0,s.v=n,s.n=i[1]):b<d&&(o=r<3||i[0]>n||n>d)&&(i[4]=r,i[5]=n,s.n=d,c=0))}if(o||r>1)return a;throw l=!0,n}return function(o,p,d){if(f>1)throw TypeError("Generator is already running");for(l&&1===p&&b(p,d),c=p,u=d;(t=c<2?e:u)||!l;){i||(c?c<3?(c>1&&(s.n=-1),b(c,u)):s.n=u:s.v=u);try{if(f=2,i){if(c||(o="next"),t=i[o]){if(!(t=t.call(i,u)))throw TypeError("iterator result is not an object");if(!t.done)return t;u=t.value,c<2&&(c=0)}else 1===c&&(t=i.return)&&t.call(i),c<2&&(u=TypeError("The iterator does not provide a '"+o+"' method"),c=1);i=e}else if((t=(l=s.n<0)?u:r.call(n,s))!==a)break}catch(t){i=e,c=1,u=t}finally{f=1}}return{value:t,done:l}}}(r,o,i),!0),p}var a={};function f(){}function p(){}function l(){}t=Object.getPrototypeOf;var s=[][n]?t(t([][n]())):(u(t={},n,function(){return this}),t),b=l.prototype=f.prototype=Object.create(s);function d(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,l):(e.__proto__=l,u(e,o,"GeneratorFunction")),e.prototype=Object.create(b),e}return p.prototype=l,u(b,"constructor",l),u(l,"constructor",p),p.displayName="GeneratorFunction",u(l,o,"GeneratorFunction"),u(b),u(b,o,"Generator"),u(b,n,function(){return this}),u(b,"toString",function(){return"[object Generator]"}),(c=function(){return{w:i,m:d}})()}function u(e,t,r,n){var o=Object.defineProperty;try{o({},"",{})}catch(e){o=0}u=function(e,t,r,n){function i(t,r){u(e,t,function(e){return this._invoke(t,r,e)})}t?o?o(e,t,{value:r,enumerable:!n,configurable:!n,writable:!n}):e[t]=r:(i("next",0),i("throw",1),i("return",2))},u(e,t,r,n)}function f(e,t,r,n,o,i,a){try{var c=e[i](a),u=c.value}catch(e){return void r(e)}c.done?t(u):Promise.resolve(u).then(n,o)}function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach(function(t){s(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function s(e,t,r){return(t=function(e){var t=function(e){if("object"!=a(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=a(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==a(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(){var e,t;return l(l({},arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),{},{id:"interact",load:(e=c().m(function e(){var t;return c().w(function(e){for(;;)switch(e.n){case 0:return e.n=1,o.e(936).then(o.bind(o,559));case 1:return t=e.v.manifest,e.a(2,t)}},e)}),t=function(){var t=this,r=arguments;return new Promise(function(n,o){var i=e.apply(t,r);function a(e){f(i,n,o,a,c,"next",e)}function c(e){f(i,n,o,a,c,"throw",e)}a(void 0)})},function(){return t.apply(this,arguments)})})}return o.d(i,{default:()=>b}),i.default})());

package/plugins/interact/src/InteractInit.jsx

@@ -1,11 +1,24 @@
-import { useEffect, useRef } from 'react'
+import { useEffect } from 'react'
 import { EVENTS } from '../../../src/config/events.js'
 import { useInteractionHandlers } from './hooks/useInteractionHandlers.js'
+import { useMapItemList } from './hooks/useMapItemList.js'
 import { useHighlightSync } from './hooks/useHighlightSync.js'
 import { useHoverCursor } from './hooks/useHoverCursor.js'
-import { attachEvents } from './events.js'
+import { useCrossHairVisibility } from './hooks/useCrossHairVisibility.js'
+import { useAttachEvents } from './hooks/useAttachEvents.js'
 import { isSelectMarkerOnly } from './utils/interactionModes.js'
 
+function useListboxCapable ({ enabled, interactionModes, markers, layers, eventBus }) {
+  useEffect(() => {
+    if (!enabled) { return }
+    const hasLabeledMarkers = interactionModes?.includes('selectMarker') && markers.items.some(m => m.label)
+    const hasFeatureLayers = interactionModes?.includes('selectFeature') && layers.some(l => l.labelProperty)
+    if (hasLabeledMarkers || hasFeatureLayers) {
+      eventBus.emit('interact:listboxcapable')
+    }
+  }, [enabled, interactionModes, markers, layers, eventBus])
+}
+
 export const InteractInit = ({
   appState,
   mapState,
@@ -14,14 +27,14 @@ export const InteractInit = ({
   mapProvider,
   pluginState
 }) => {
-  const { interfaceType } = appState
-  const { dispatch, enabled, selectedFeatures, selectionBounds, interactionModes, layers } = pluginState
+  const { dispatch, enabled, selectedFeatures, interactionModes, layers } = pluginState
   const { eventBus, closeApp } = services
-  const { crossHair, mapStyle } = mapState
+  const { crossHair, mapStyle, markers } = mapState
 
-  const isTouchOrKeyboard = ['touch', 'keyboard'].includes(interfaceType)
   const selectMarkerOnly = isSelectMarkerOnly(interactionModes)
 
+  useMapItemList({ mapState, pluginState, services, mapProvider })
+
   // Core interaction logic (click > select/marker)
   const { handleInteraction } = useInteractionHandlers({
     appState,
@@ -31,34 +44,12 @@ export const InteractInit = ({
     mapProvider
   })
 
-  // Refs updated synchronously each render — keeps callbacks fresh without re-attaching events
-  const handleInteractionRef = useRef(handleInteraction)
-  handleInteractionRef.current = handleInteraction
-
-  const pluginStateRef = useRef(pluginState)
-  pluginStateRef.current = pluginState
-
-  const appStateRef = useRef(appState)
-  appStateRef.current = appState
-
-  // Defer click handling by one macrotask so any click that triggered the enable
-  // (e.g. finishing a draw gesture) fires before this handler is live.
-  // Managed separately from attachEvents so re-runs of that effect don't reset it —
-  // only resets when enabled actually changes.
-  const clickReadyRef = useRef(false)
-  useEffect(() => {
-    clickReadyRef.current = false
-    const timer = setTimeout(() => { clickReadyRef.current = true }, 0)
-    return () => clearTimeout(timer)
-  }, [pluginState.enabled])
-
   // Highlight features and sync state selectedBounds from mapProvider
   useHighlightSync({
     mapProvider,
     mapStyle,
     pluginState,
     selectedFeatures,
-    selectionBounds,
     dispatch,
     events: EVENTS,
     eventBus
@@ -69,36 +60,13 @@ export const InteractInit = ({
     eventBus.emit('interact:active', { active: enabled, interactionModes })
   }, [enabled, interactionModes])
 
-  useHoverCursor(mapProvider, enabled, interactionModes, layers)
-
-  // Toggle target marker visibility
-  useEffect(() => {
-    if (enabled && isTouchOrKeyboard && !(interfaceType === 'touch' && selectMarkerOnly)) {
-      crossHair.fixAtCenter()
-    } else {
-      crossHair.hide()
-    }
-  }, [enabled, interfaceType, interactionModes])
+  useListboxCapable({ enabled, interactionModes, markers, layers, eventBus })
 
-  useEffect(() => {
-    if (!pluginState.enabled) {
-      return undefined // Explicit return
-    }
+  useHoverCursor(mapProvider, enabled, interactionModes, layers)
 
-    const cleanupEvents = attachEvents({
-      getAppState: () => appStateRef.current,
-      mapState,
-      getPluginState: () => pluginStateRef.current,
-      buttonConfig,
-      events: EVENTS,
-      eventBus,
-      handleInteraction: (event) => handleInteractionRef.current(event),
-      clickReadyRef,
-      closeApp
-    })
+  useCrossHairVisibility({ crossHair, enabled, selectMarkerOnly, appState })
 
-    return cleanupEvents
-  }, [pluginState.enabled, buttonConfig, eventBus, closeApp])
+  useAttachEvents({ pluginState, appState, mapState, buttonConfig, eventBus, handleInteraction, closeApp })
 
   return null
 }

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

@@ -1,48 +1,50 @@
-import { act, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import { EVENTS } from '../../../src/config/events.js'
 import { InteractInit } from './InteractInit.jsx'
 import { useInteractionHandlers } from './hooks/useInteractionHandlers.js'
 import { useHighlightSync } from './hooks/useHighlightSync.js'
 import { useHoverCursor } from './hooks/useHoverCursor.js'
-import { attachEvents } from './events.js'
+import { useMapItemList } from './hooks/useMapItemList.js'
+
+const LISTBOX_CAPABLE = 'interact:listboxcapable'
 
 jest.mock('./hooks/useInteractionHandlers.js')
 jest.mock('./hooks/useHighlightSync.js')
 jest.mock('./hooks/useHoverCursor.js')
-jest.mock('./events.js')
-
-describe('InteractInit', () => {
-  let props
-  let handleInteractionMock
-  let cleanupMock
-
-  beforeEach(() => {
-    handleInteractionMock = jest.fn()
-    cleanupMock = jest.fn()
-
-    useInteractionHandlers.mockReturnValue({ handleInteraction: handleInteractionMock })
-    useHighlightSync.mockReturnValue(undefined)
-    useHoverCursor.mockReturnValue(undefined)
-    attachEvents.mockReturnValue(cleanupMock)
-
-    props = {
-      appState: { interfaceType: 'mouse', layoutRefs: { viewportRef: { current: null } } },
-      mapState: { crossHair: { fixAtCenter: jest.fn(), hide: jest.fn() }, mapStyle: {} },
-      services: { eventBus: { emit: jest.fn() }, closeApp: jest.fn() },
-      buttonConfig: {},
-      mapProvider: { setHoverCursor: jest.fn() },
-      pluginState: {
-        dispatch: jest.fn(),
-        enabled: true,
-        selectedFeatures: [],
-        selectedMarkers: [],
-        selectionBounds: {},
-        interactionModes: ['selectFeature'],
-        layers: []
-      }
+jest.mock('./hooks/useMapItemList.js')
+jest.mock('./hooks/useCrossHairVisibility.js')
+jest.mock('./hooks/useAttachEvents.js')
+
+let props
+let handleInteractionMock
+
+beforeEach(() => {
+  handleInteractionMock = jest.fn()
+
+  useInteractionHandlers.mockReturnValue({ handleInteraction: handleInteractionMock })
+  useHighlightSync.mockReturnValue(undefined)
+  useHoverCursor.mockReturnValue(undefined)
+  useMapItemList.mockReturnValue(undefined)
+
+  props = {
+    appState: { interfaceType: 'mouse', layoutRefs: { viewportRef: { current: document.createElement('div') }, appContainerRef: { current: document.createElement('div') } } },
+    mapState: { crossHair: { fixAtCenter: jest.fn(), hide: jest.fn() }, mapStyle: {} },
+    services: { eventBus: { emit: jest.fn() }, closeApp: jest.fn() },
+    buttonConfig: {},
+    mapProvider: { setHoverCursor: jest.fn() },
+    pluginState: {
+      dispatch: jest.fn(),
+      enabled: true,
+      selectedFeatures: [],
+      selectedMarkers: [],
+      selectionBounds: {},
+      interactionModes: ['selectFeature'],
+      layers: []
     }
-  })
+  }
+})
 
+describe('InteractInit — hook delegation', () => {
   it('calls useInteractionHandlers with correct arguments', () => {
     render(<InteractInit {...props} />)
     expect(useInteractionHandlers).toHaveBeenCalledWith(expect.objectContaining({
@@ -66,44 +68,9 @@ describe('InteractInit', () => {
       eventBus: props.services.eventBus
     }))
   })
+})
 
-  it('fixes or hides crossHair based on interfaceType and enabled', () => {
-    // enabled true + non-touch = hide
-    render(<InteractInit {...props} />)
-    expect(props.mapState.crossHair.hide).toHaveBeenCalled()
-    expect(props.mapState.crossHair.fixAtCenter).not.toHaveBeenCalled()
-
-    // touch interface
-    props.appState.interfaceType = 'touch'
-    render(<InteractInit {...props} />)
-    expect(props.mapState.crossHair.fixAtCenter).toHaveBeenCalled()
-  })
-
-  it('attaches events and returns cleanup', () => {
-    const { unmount } = render(<InteractInit {...props} />)
-    expect(attachEvents).toHaveBeenCalledWith(expect.objectContaining({
-      getAppState: expect.any(Function),
-      getPluginState: expect.any(Function),
-      handleInteraction: expect.any(Function),
-      mapState: props.mapState,
-      buttonConfig: props.buttonConfig,
-      events: EVENTS,
-      eventBus: props.services.eventBus,
-      closeApp: props.services.closeApp
-    }))
-
-    const { getAppState, getPluginState, handleInteraction } = attachEvents.mock.calls.at(-1)[0]
-    expect(getAppState()).toMatchObject(props.appState)
-    expect(getPluginState()).toMatchObject({ enabled: props.pluginState.enabled })
-
-    const event = { point: {}, coords: [] }
-    handleInteraction(event)
-    expect(handleInteractionMock).toHaveBeenCalledWith(event)
-
-    unmount()
-    expect(cleanupMock).toHaveBeenCalled()
-  })
-
+describe('InteractInit — event bus emissions', () => {
   it('emits interact:active with active state and interactionModes on enable', () => {
     render(<InteractInit {...props} />)
     expect(props.services.eventBus.emit).toHaveBeenCalledWith('interact:active', {
@@ -112,20 +79,31 @@ describe('InteractInit', () => {
     })
   })
 
-  it('enables click handling after a macrotask', () => {
-    jest.useFakeTimers()
-    render(<InteractInit {...props} />)
-    act(() => jest.runAllTimers())
-    jest.useRealTimers()
+  it('emits interact:listboxcapable when enabled with a feature layer that has a labelProperty', () => {
+    const capableProps = {
+      ...props,
+      pluginState: { ...props.pluginState, interactionModes: ['selectFeature'], layers: [{ layerId: 'myLayer', labelProperty: 'name' }] }
+    }
+    render(<InteractInit {...capableProps} />)
+    expect(capableProps.services.eventBus.emit).toHaveBeenCalledWith(LISTBOX_CAPABLE)
+  })
+
+  it('emits interact:listboxcapable when enabled with a labeled marker', () => {
+    const capableProps = {
+      ...props,
+      mapState: { ...props.mapState, markers: { items: [{ id: 'm1', label: 'My marker' }] } },
+      pluginState: { ...props.pluginState, interactionModes: ['selectMarker'] }
+    }
+    render(<InteractInit {...capableProps} />)
+    expect(capableProps.services.eventBus.emit).toHaveBeenCalledWith(LISTBOX_CAPABLE)
   })
 
-  it('does not attach events if plugin not enabled', () => {
+  it('does not emit interact:listboxcapable when disabled', () => {
     const disabledProps = {
       ...props,
-      pluginState: { ...props.pluginState, enabled: false } // fresh object
+      pluginState: { ...props.pluginState, enabled: false, interactionModes: ['selectFeature'], layers: [{ layerId: 'myLayer', labelProperty: 'name' }] }
     }
-    attachEvents.mockClear() // ensure previous calls don't interfere
     render(<InteractInit {...disabledProps} />)
-    expect(attachEvents).not.toHaveBeenCalled()
+    expect(disabledProps.services.eventBus.emit).not.toHaveBeenCalledWith(LISTBOX_CAPABLE)
   })
 })

package/plugins/interact/src/defaults.js

@@ -2,8 +2,6 @@ export const DEFAULTS = {
   tolerance: 10,
   interactionModes: ['selectMarker'],
   multiSelect: false,
-  contiguous: false,
   deselectOnClickOutside: false,
-  marker: {},
-  selectedStrokeWidth: 3
+  marker: {}
 }

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

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from 'react'
+import { EVENTS } from '../../../../src/config/events.js'
+import { attachEvents } from '../events.js'
+
+export function useAttachEvents ({ pluginState, appState, mapState, buttonConfig, eventBus, handleInteraction, closeApp }) {
+  // Refs updated synchronously each render — keeps callbacks fresh without re-attaching events
+  const handleInteractionRef = useRef(handleInteraction)
+  handleInteractionRef.current = handleInteraction
+
+  const pluginStateRef = useRef(pluginState)
+  pluginStateRef.current = pluginState
+
+  const appStateRef = useRef(appState)
+  appStateRef.current = appState
+
+  // Defer click handling by one macrotask so any click that triggered the enable
+  // (e.g. finishing a draw gesture) fires before this handler is live.
+  // Managed separately from attachEvents so re-runs of that effect don't reset it —
+  // only resets when enabled actually changes.
+  const clickReadyRef = useRef(false)
+  useEffect(() => {
+    clickReadyRef.current = false
+    const timer = setTimeout(() => { clickReadyRef.current = true }, 0)
+    return () => clearTimeout(timer)
+  }, [pluginState.enabled])
+
+  useEffect(() => {
+    if (!pluginState.enabled) {
+      return undefined
+    }
+
+    const cleanupEvents = attachEvents({
+      getAppState: () => appStateRef.current,
+      mapState,
+      getPluginState: () => pluginStateRef.current,
+      buttonConfig,
+      events: EVENTS,
+      eventBus,
+      handleInteraction: (event) => handleInteractionRef.current(event),
+      clickReadyRef,
+      closeApp
+    })
+
+    return cleanupEvents
+  }, [pluginState.enabled, buttonConfig, eventBus, closeApp])
+}

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

@@ -0,0 +1,68 @@
+import { act, renderHook } from '@testing-library/react'
+import { useAttachEvents } from './useAttachEvents.js'
+import { attachEvents } from '../events.js'
+import { EVENTS } from '../../../../src/config/events.js'
+
+jest.mock('../events.js')
+
+let props
+let cleanupMock
+let handleInteractionMock
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  cleanupMock = jest.fn()
+  handleInteractionMock = jest.fn()
+  attachEvents.mockReturnValue(cleanupMock)
+
+  props = {
+    pluginState: { enabled: true },
+    appState: { interfaceType: 'mouse' },
+    mapState: { mapStyle: {} },
+    buttonConfig: {},
+    eventBus: { emit: jest.fn() },
+    closeApp: jest.fn(),
+    handleInteraction: handleInteractionMock
+  }
+})
+
+describe('useAttachEvents', () => {
+  it('attaches events and returns cleanup', () => {
+    const { unmount } = renderHook(() => useAttachEvents(props))
+    expect(attachEvents).toHaveBeenCalledWith(expect.objectContaining({
+      getAppState: expect.any(Function),
+      getPluginState: expect.any(Function),
+      handleInteraction: expect.any(Function),
+      mapState: props.mapState,
+      buttonConfig: props.buttonConfig,
+      events: EVENTS,
+      eventBus: props.eventBus,
+      closeApp: props.closeApp
+    }))
+
+    const { getAppState, getPluginState, handleInteraction } = attachEvents.mock.calls.at(-1)[0]
+    expect(getAppState()).toBe(props.appState)
+    expect(getPluginState()).toMatchObject({ enabled: props.pluginState.enabled })
+
+    handleInteraction({ point: {}, coords: [] })
+    expect(handleInteractionMock).toHaveBeenCalled()
+
+    unmount()
+    expect(cleanupMock).toHaveBeenCalled()
+  })
+
+  it('enables click handling after a macrotask', () => {
+    jest.useFakeTimers()
+    renderHook(() => useAttachEvents(props))
+    const { clickReadyRef } = attachEvents.mock.calls[0][0]
+    expect(clickReadyRef.current).toBe(false)
+    act(() => jest.runAllTimers())
+    expect(clickReadyRef.current).toBe(true)
+    jest.useRealTimers()
+  })
+
+  it('does not attach events if plugin not enabled', () => {
+    renderHook(() => useAttachEvents({ ...props, pluginState: { enabled: false } }))
+    expect(attachEvents).not.toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useRef } from 'react'
+import { getInterfaceType, subscribeToInterfaceChangesImmediate } from '../../../../src/utils/detectInterfaceType.js'
+
+export function useCrossHairVisibility ({ crossHair, enabled, selectMarkerOnly, appState }) {
+  const enabledRef = useRef(enabled)
+  enabledRef.current = enabled
+  const selectMarkerOnlyRef = useRef(selectMarkerOnly)
+  selectMarkerOnlyRef.current = selectMarkerOnly
+  const crossHairRef = useRef(crossHair)
+  crossHairRef.current = crossHair
+  const listboxFocusRef = useRef(false)
+
+  const updateCrossHair = useCallback(() => {
+    const type = getInterfaceType()
+    const isToK = ['touch', 'keyboard'].includes(type)
+    if (enabledRef.current && !listboxFocusRef.current && isToK && !(type === 'touch' && selectMarkerOnlyRef.current)) {
+      crossHairRef.current.fixAtCenter()
+    } else {
+      crossHairRef.current.hide()
+    }
+  }, [])
+
+  // Toggle target marker visibility on enabled/interactionModes changes
+  useEffect(() => {
+    updateCrossHair()
+  }, [enabled, selectMarkerOnly, updateCrossHair])
+
+  // Toggle target marker visibility immediately on interface type change (no 150ms React delay)
+  useEffect(() => {
+    return subscribeToInterfaceChangesImmediate(updateCrossHair)
+  }, [updateCrossHair])
+
+  // Hide crosshair when listbox has focus
+  useEffect(() => {
+    const container = appState.layoutRefs?.appContainerRef?.current
+    if (!container) { return undefined }
+    const handleFocusIn = (e) => {
+      const inListbox = !!e.target.closest('[role="listbox"], [role="option"]')
+      if (listboxFocusRef.current !== inListbox) {
+        listboxFocusRef.current = inListbox
+        updateCrossHair()
+      }
+    }
+    container.addEventListener('focusin', handleFocusIn)
+    return () => { container.removeEventListener('focusin', handleFocusIn) }
+  }, [appState.layoutRefs, updateCrossHair])
+}

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

@@ -0,0 +1,54 @@
+import { act, renderHook } from '@testing-library/react'
+import { useCrossHairVisibility } from './useCrossHairVisibility.js'
+import { getInterfaceType } from '../../../../src/utils/detectInterfaceType.js'
+
+jest.mock('../../../../src/utils/detectInterfaceType.js', () => ({
+  getInterfaceType: jest.fn(() => 'mouse'),
+  subscribeToInterfaceChangesImmediate: jest.fn(() => () => {})
+}))
+
+let crossHair
+let appState
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  crossHair = { fixAtCenter: jest.fn(), hide: jest.fn() }
+  appState = { layoutRefs: { appContainerRef: { current: document.createElement('div') } } }
+  getInterfaceType.mockReturnValue('mouse')
+})
+
+describe('useCrossHairVisibility', () => {
+  it('skips listbox focus listeners when appContainerRef is null', () => {
+    appState.layoutRefs.appContainerRef = { current: null }
+    renderHook(() => useCrossHairVisibility({ crossHair, enabled: true, selectMarkerOnly: false, appState }))
+    expect(crossHair.hide).toHaveBeenCalled()
+  })
+
+  it('shows crosshair on touch/keyboard and hides when listbox has focus', () => {
+    const container = appState.layoutRefs.appContainerRef.current
+    getInterfaceType.mockReturnValue('touch')
+    renderHook(() => useCrossHairVisibility({ crossHair, enabled: true, selectMarkerOnly: false, appState }))
+
+    expect(crossHair.fixAtCenter).toHaveBeenCalled()
+
+    // Focus moves into listbox — hide
+    const listboxEl = document.createElement('div')
+    listboxEl.setAttribute('role', 'listbox')
+    container.appendChild(listboxEl)
+    act(() => listboxEl.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
+    expect(crossHair.hide).toHaveBeenCalled()
+
+    // Second focusin still inside listbox — no-op (state unchanged)
+    const listboxEl2 = document.createElement('div')
+    listboxEl2.setAttribute('role', 'listbox')
+    container.appendChild(listboxEl2)
+    act(() => listboxEl2.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
+    expect(crossHair.hide).toHaveBeenCalledTimes(1)
+
+    // Focus moves back out of listbox — show again
+    const otherEl = document.createElement('div')
+    container.appendChild(otherEl)
+    act(() => otherEl.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
+    expect(crossHair.fixAtCenter).toHaveBeenCalledTimes(2)
+  })
+})

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

@@ -1,6 +1,18 @@
 import { useEffect, useMemo } from 'react'
 import { buildStylesMap } from '../utils/buildStylesMap.js'
 
+/**
+ * Keeps map highlight rendering in sync with the current selection and keyboard-active item.
+ *
+ * Calls mapProvider.updateHighlightedFeatures whenever selectedFeatures or listboxActiveItem
+ * changes, passing selected features (shown with the selection ring) and the active item
+ * (shown with the keyboard cursor ring) as separate arguments so the provider can style them
+ * differently. Also re-applies highlights after a map style reload, since highlight layers
+ * are removed when the base style changes.
+ *
+ * Dispatches UPDATE_SELECTED_BOUNDS with the bounding box returned by the provider so
+ * downstream consumers (e.g. interact:done) receive up-to-date bounds.
+ */
 export const useHighlightSync = ({
   mapProvider,
   mapStyle,
@@ -10,7 +22,7 @@ export const useHighlightSync = ({
   events,
   eventBus
 }) => {
-  const { layers } = pluginState
+  const { layers, listboxActiveItem } = pluginState
 
   // Memoize stylesMap so it only recalculates when style or layers change
   const stylesMap = useMemo(() => {
@@ -22,7 +34,10 @@ export const useHighlightSync = ({
 
   // Force re-application of all selected features
   const updateHighlightedFeatures = () => {
-    const bounds = mapProvider.updateHighlightedFeatures?.(selectedFeatures, stylesMap)
+    const activeFeatures = listboxActiveItem
+      ? [{ featureId: listboxActiveItem.featureId, layerId: listboxActiveItem.layerId, idProperty: listboxActiveItem.idProperty, geometry: listboxActiveItem.geometry }]
+      : []
+    const bounds = mapProvider.updateHighlightedFeatures?.(selectedFeatures, activeFeatures, stylesMap)
 
     dispatch({
       type: 'UPDATE_SELECTED_BOUNDS',
@@ -31,18 +46,25 @@ export const useHighlightSync = ({
   }
 
   useEffect(() => {
-    if (!mapProvider || !selectedFeatures || !stylesMap) {
+    if (!mapProvider || !stylesMap) {
       return undefined // Explicit return to match the cleanup function return below
     }
 
-    // Update updateHighlightedFeatures on interaction
     updateHighlightedFeatures()
 
-    // Update updateHighlightedFeatures on stylechange
-    eventBus.on(events.MAP_DATA_CHANGE, updateHighlightedFeatures)
+    // Re-apply after style reload — highlight layers are removed when style reloads.
+    // MAP_STYLE_CHANGE fires as soon as the new style is ready, before any plugin has
+    // re-added its layers, so we register a one-time MAP_DATA_CHANGE listener instead.
+    // MAP_DATA_CHANGE is debounced and fires once all layer additions from every plugin
+    // have settled, giving us a single well-timed trigger. Using once() avoids the
+    // infinite loop a permanent listener would cause (layer moves re-trigger MAP_DATA_CHANGE).
+    const handleStyleChange = () => {
+      eventBus.once(events.MAP_DATA_CHANGE, updateHighlightedFeatures)
+    }
+    eventBus.on(events.MAP_STYLE_CHANGE, handleStyleChange)
 
     return () => {
-      eventBus.off(events.MAP_DATA_CHANGE, updateHighlightedFeatures)
+      eventBus.off(events.MAP_STYLE_CHANGE, handleStyleChange)
     }
-  }, [selectedFeatures, mapProvider, stylesMap])
+  }, [selectedFeatures, listboxActiveItem, mapProvider, stylesMap, eventBus])
 }