@defra/interactive-map 0.0.31-alpha → 0.0.33-alpha

package/providers/beta/openlayers/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.openLayersProvider=t())}(this,()=>(()=>{"use strict";var e,t,r={},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-openlayers-provider.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.openLayersProvider:",o.l=(r,n,i,a)=>{if(e[r])e[r].push(n);else{var u,c;if(void 0!==i)for(var f=document.getElementsByTagName("script"),p=0;p<f.length;p++){var s=f[p];if(s.getAttribute("src")==r||s.getAttribute("data-webpack")==t+i){u=s;break}}u||(c=!0,(u=document.createElement("script")).charset="utf-8",o.nc&&u.setAttribute("nonce",o.nc),u.setAttribute("data-webpack",t+i),u.src=r),e[r]=[n];var l=(t,n)=>{u.onerror=u.onload=null,clearTimeout(d);var o=e[r];if(delete e[r],u.parentNode&&u.parentNode.removeChild(u),o&&o.forEach(e=>e(n)),t)return t(n)},d=setTimeout(l.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=l.bind(null,u.onerror),u.onload=l.bind(null,u.onload),c&&document.head.appendChild(u)}},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),u=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;u.message="Loading chunk "+t+" failed.\n("+i+": "+a+")",u.name="ChunkLoadError",u.type=i,u.request=a,n[1](u)}},"chunk-"+t,t)}};var t=(t,r)=>{var n,i,[a,u,c]=r,f=0;if(a.some(t=>0!==e[t])){for(n in u)o.o(u,n)&&(o.m[n]=u[n]);c&&c(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(){var e,t,r="function"==typeof Symbol?Symbol:{},n=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,n,o,i){var a=n&&n.prototype instanceof f?n:f,p=Object.create(a.prototype);return u(p,"_invoke",function(r,n,o){var i,a,u,f=0,p=o||[],s=!1,l={p:0,n:0,v:e,a:d,f:d.bind(e,4),d:function(t,r){return i=t,a=0,u=e,l.n=r,c}};function d(r,n){for(a=r,u=n,t=0;!s&&f&&!o&&t<p.length;t++){var o,i=p[t],d=l.p,v=i[2];r>3?(o=v===n)&&(u=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=e):i[0]<=d&&((o=r<2&&d<i[1])?(a=0,l.v=n,l.n=i[1]):d<v&&(o=r<3||i[0]>n||n>v)&&(i[4]=r,i[5]=n,l.n=v,a=0))}if(o||r>1)return c;throw s=!0,n}return function(o,p,v){if(f>1)throw TypeError("Generator is already running");for(s&&1===p&&d(p,v),a=p,u=v;(t=a<2?e:u)||!s;){i||(a?a<3?(a>1&&(l.n=-1),d(a,u)):l.n=u:l.v=u);try{if(f=2,i){if(a||(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,a<2&&(a=0)}else 1===a&&(t=i.return)&&t.call(i),a<2&&(u=TypeError("The iterator does not provide a '"+o+"' method"),a=1);i=e}else if((t=(s=l.n<0)?u:r.call(n,l))!==c)break}catch(t){i=e,a=1,u=t}finally{f=1}}return{value:t,done:s}}}(r,o,i),!0),p}var c={};function f(){}function p(){}function s(){}t=Object.getPrototypeOf;var l=[][n]?t(t([][n]())):(u(t={},n,function(){return this}),t),d=s.prototype=f.prototype=Object.create(l);function v(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,s):(e.__proto__=s,u(e,o,"GeneratorFunction")),e.prototype=Object.create(d),e}return p.prototype=s,u(d,"constructor",s),u(s,"constructor",p),p.displayName="GeneratorFunction",u(s,o,"GeneratorFunction"),u(d),u(d,o,"Generator"),u(d,n,function(){return this}),u(d,"toString",function(){return"[object Generator]"}),(a=function(){return{w:i,m:v}})()}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 c(e,t,r,n,o,i,a){try{var u=e[i](a),c=u.value}catch(e){return void r(e)}u.done?t(c):Promise.resolve(c).then(n,o)}function f(){var e,t,r=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).zoomAlignment;return{checkDeviceCapabilities:function(){return{isSupported:!!document.createElement("canvas").getContext,error:"Canvas is not supported in this browser"}},load:(e=a().m(function e(){var t,n;return a().w(function(e){for(;;)switch(e.n){case 0:return e.n=1,o.e(142).then(o.bind(o,792));case 1:return t=e.v.default,n={zoomAlignment:r,crs:"EPSG:27700"},e.a(2,{MapProvider:t,mapProviderConfig:n})}},e)}),t=function(){var t=this,r=arguments;return new Promise(function(n,o){var i=e.apply(t,r);function a(e){c(i,n,o,a,u,"next",e)}function u(e){c(i,n,o,a,u,"throw",e)}a(void 0)})},function(){return t.apply(this,arguments)})}}return o.d(i,{default:()=>f}),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.openLayersProvider=t())}(this,()=>(()=>{"use strict";var e,t,r={},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-openlayers-provider.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.openLayersProvider:",o.l=(r,n,i,a)=>{if(e[r])e[r].push(n);else{var u,c;if(void 0!==i)for(var f=document.getElementsByTagName("script"),p=0;p<f.length;p++){var s=f[p];if(s.getAttribute("src")==r||s.getAttribute("data-webpack")==t+i){u=s;break}}u||(c=!0,(u=document.createElement("script")).charset="utf-8",o.nc&&u.setAttribute("nonce",o.nc),u.setAttribute("data-webpack",t+i),u.src=r),e[r]=[n];var l=(t,n)=>{u.onerror=u.onload=null,clearTimeout(d);var o=e[r];if(delete e[r],u.parentNode&&u.parentNode.removeChild(u),o&&o.forEach(e=>e(n)),t)return t(n)},d=setTimeout(l.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=l.bind(null,u.onerror),u.onload=l.bind(null,u.onload),c&&document.head.appendChild(u)}},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),u=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;u.message="Loading chunk "+t+" failed.\n("+i+": "+a+")",u.name="ChunkLoadError",u.type=i,u.request=a,n[1](u)}},"chunk-"+t,t)}};var t=(t,r)=>{var n,i,[a,u,c]=r,f=0;if(a.some(t=>0!==e[t])){for(n in u)o.o(u,n)&&(o.m[n]=u[n]);c&&c(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(){var e,t,r="function"==typeof Symbol?Symbol:{},n=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,n,o,i){var a=n&&n.prototype instanceof f?n:f,p=Object.create(a.prototype);return u(p,"_invoke",function(r,n,o){var i,a,u,f=0,p=o||[],s=!1,l={p:0,n:0,v:e,a:d,f:d.bind(e,4),d:function(t,r){return i=t,a=0,u=e,l.n=r,c}};function d(r,n){for(a=r,u=n,t=0;!s&&f&&!o&&t<p.length;t++){var o,i=p[t],d=l.p,v=i[2];r>3?(o=v===n)&&(u=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=e):i[0]<=d&&((o=r<2&&d<i[1])?(a=0,l.v=n,l.n=i[1]):d<v&&(o=r<3||i[0]>n||n>v)&&(i[4]=r,i[5]=n,l.n=v,a=0))}if(o||r>1)return c;throw s=!0,n}return function(o,p,v){if(f>1)throw TypeError("Generator is already running");for(s&&1===p&&d(p,v),a=p,u=v;(t=a<2?e:u)||!s;){i||(a?a<3?(a>1&&(l.n=-1),d(a,u)):l.n=u:l.v=u);try{if(f=2,i){if(a||(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,a<2&&(a=0)}else 1===a&&(t=i.return)&&t.call(i),a<2&&(u=TypeError("The iterator does not provide a '"+o+"' method"),a=1);i=e}else if((t=(s=l.n<0)?u:r.call(n,l))!==c)break}catch(t){i=e,a=1,u=t}finally{f=1}}return{value:t,done:s}}}(r,o,i),!0),p}var c={};function f(){}function p(){}function s(){}t=Object.getPrototypeOf;var l=[][n]?t(t([][n]())):(u(t={},n,function(){return this}),t),d=s.prototype=f.prototype=Object.create(l);function v(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,s):(e.__proto__=s,u(e,o,"GeneratorFunction")),e.prototype=Object.create(d),e}return p.prototype=s,u(d,"constructor",s),u(s,"constructor",p),p.displayName="GeneratorFunction",u(s,o,"GeneratorFunction"),u(d),u(d,o,"Generator"),u(d,n,function(){return this}),u(d,"toString",function(){return"[object Generator]"}),(a=function(){return{w:i,m:v}})()}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 c(e,t,r,n,o,i,a){try{var u=e[i](a),c=u.value}catch(e){return void r(e)}u.done?t(c):Promise.resolve(c).then(n,o)}function f(){var e,t,r=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).zoomAlignment;return{checkDeviceCapabilities:function(){return{isSupported:!!document.createElement("canvas").getContext,error:"Canvas is not supported in this browser"}},load:(e=a().m(function e(){var t,n;return a().w(function(e){for(;;)switch(e.n){case 0:return e.n=1,o.e(142).then(o.bind(o,93));case 1:return t=e.v.default,n={zoomAlignment:r,crs:"EPSG:27700"},e.a(2,{MapProvider:t,mapProviderConfig:n})}},e)}),t=function(){var t=this,r=arguments;return new Promise(function(n,o){var i=e.apply(t,r);function a(e){c(i,n,o,a,u,"next",e)}function u(e){c(i,n,o,a,u,"throw",e)}a(void 0)})},function(){return t.apply(this,arguments)})}}return o.d(i,{default:()=>f}),i.default})());

package/providers/beta/openlayers/src/utils/tileLayers.js

@@ -1,4 +1,5 @@
 import XYZ from 'ol/source/XYZ.js'
+import TileWMS from 'ol/source/TileWMS.js'
 import VectorTileSource from 'ol/source/VectorTile.js'
 import TileLayer from 'ol/layer/Tile.js'
 import VectorTileLayer from 'ol/layer/VectorTile.js'
@@ -14,6 +15,7 @@ import { TILE_GRID_RESOLUTIONS, TILE_GRID_ORIGIN, TILE_SIZE } from '../defaults.
 recordStyleLayer(true)
 
 const CRS = 'EPSG:27700'
+const SUPPORTED_MAP_STYLE_TYPES = ['vector', 'raster', 'wms', 'ogc-vt']
 
 export function fetchWithTransform (url, resourceType, transformRequest) {
   const result = transformRequest ? (transformRequest(url, resourceType) || {}) : {}
@@ -30,12 +32,28 @@ const createTileLoadFunction = (transformRequest) => (tile, src) => {
     .catch(() => tile.setState(TileState.ERROR))
 }
 
-export function createTileSource (url, transformRequest) {
-  const tileGrid = new TileGrid({
+function createTileGrid () {
+  return new TileGrid({
     resolutions: TILE_GRID_RESOLUTIONS,
     origin: TILE_GRID_ORIGIN,
     tileSize: TILE_SIZE
   })
+}
+
+export function createWMSTileSource (url, params, transformRequest) {
+  const tileGrid = createTileGrid()
+
+  return new TileWMS({
+    url,
+    params,
+    projection: CRS,
+    tileGrid,
+    tileLoadFunction: transformRequest ? createTileLoadFunction(transformRequest) : undefined
+  })
+}
+
+export function createTileSource (url, transformRequest) {
+  const tileGrid = createTileGrid()
 
   const tileUrlFunction = ([z, x, y]) => url
     .replace('{z}', z)
@@ -51,6 +69,15 @@ export function createTileSource (url, transformRequest) {
 }
 
 export async function createMapStyleLayer (mapStyle, transformRequest) {
+  if (mapStyle.type && !SUPPORTED_MAP_STYLE_TYPES.includes(mapStyle.type)) {
+    throw new Error(`Unsupported map style type: '${mapStyle.type}'`)
+  }
+
+  if (mapStyle.type === 'wms') {
+    const source = createWMSTileSource(mapStyle.url, mapStyle.params || {}, transformRequest)
+    return { layer: new TileLayer({ source }), source }
+  }
+
   if (mapStyle.type === 'raster') {
     const source = createTileSource(mapStyle.url, transformRequest)
     return { layer: new TileLayer({ source }), source }

package/providers/beta/openlayers/src/utils/tileLayers.test.js

@@ -1,14 +1,16 @@
 import XYZ from 'ol/source/XYZ.js'
+import TileWMS from 'ol/source/TileWMS.js'
 import TileGrid from 'ol/tilegrid/TileGrid.js'
 import TileLayer from 'ol/layer/Tile.js'
 import VectorTileSource from 'ol/source/VectorTile.js'
 import VectorTileLayer from 'ol/layer/VectorTile.js'
 import { stylefunction } from 'ol-mapbox-style'
-import { createTileSource, createMapStyleLayer, createVectorTileLayer } from './tileLayers.js'
+import { createTileSource, createWMSTileSource, createMapStyleLayer, createVectorTileLayer } from './tileLayers.js'
 import { TILE_GRID_RESOLUTIONS, TILE_GRID_ORIGIN, TILE_SIZE } from '../defaults.js'
 
 const mockTileGridInstance = {}
 const mockSourceInstance = {}
+const mockWMSSourceInstance = {}
 const mockTileLayerInstance = {}
 const mockVectorTileSourceInstance = {}
 const mockOGCVectorTileSourceInstance = { supportedMediaTypes: [] }
@@ -16,6 +18,7 @@ const mockVectorTileLayerInstance = {}
 const mockMVTInstance = { supportedMediaTypes: [] }
 
 jest.mock('ol/source/XYZ.js', () => ({ __esModule: true, default: jest.fn(() => mockSourceInstance) }))
+jest.mock('ol/source/TileWMS.js', () => ({ __esModule: true, default: jest.fn(() => mockWMSSourceInstance) }))
 jest.mock('ol/layer/Tile.js', () => ({ __esModule: true, default: jest.fn(() => mockTileLayerInstance) }))
 jest.mock('ol/tilegrid/TileGrid.js', () => ({ __esModule: true, default: jest.fn(() => mockTileGridInstance) }))
 jest.mock('ol/TileState.js', () => ({ __esModule: true, default: { ERROR: 'error' } }))
@@ -126,6 +129,43 @@ describe('createTileSource', () => {
   })
 })
 
+describe('createWMSTileSource', () => {
+  const wmsParams = { LAYERS: 'MyLayer', FORMAT: 'image/jpeg' }
+
+  beforeEach(() => jest.clearAllMocks())
+
+  it('creates TileGrid with correct OS tile grid config', () => {
+    createWMSTileSource('https://wms.example.com/wms', wmsParams, null)
+    expect(TileGrid).toHaveBeenCalledWith({
+      resolutions: TILE_GRID_RESOLUTIONS,
+      origin: TILE_GRID_ORIGIN,
+      tileSize: TILE_SIZE
+    })
+  })
+
+  it('creates TileWMS source with EPSG:27700 projection and params', () => {
+    createWMSTileSource('https://wms.example.com/wms', wmsParams, null)
+    expect(TileWMS).toHaveBeenCalledWith(expect.objectContaining({
+      url: 'https://wms.example.com/wms',
+      params: wmsParams,
+      projection: 'EPSG:27700',
+      tileGrid: mockTileGridInstance
+    }))
+  })
+
+  it('does not set tileLoadFunction when transformRequest is null', () => {
+    createWMSTileSource('https://wms.example.com/wms', wmsParams, null)
+    const { tileLoadFunction } = TileWMS.mock.calls[0][0]
+    expect(tileLoadFunction).toBeUndefined()
+  })
+
+  it('sets tileLoadFunction when transformRequest is provided', () => {
+    createWMSTileSource('https://wms.example.com/wms', wmsParams, jest.fn())
+    const { tileLoadFunction } = TileWMS.mock.calls[0][0]
+    expect(typeof tileLoadFunction).toBe('function')
+  })
+})
+
 describe('tileLoadFunction (via transformRequest)', () => {
   const url = 'https://tiles.example.com/7/3/5'
   const mockImg = { src: null }
@@ -191,6 +231,13 @@ describe('createMapStyleLayer', () => {
     global.fetch = makeVectorFetchMock()
   })
 
+  it('creates a WMS tile layer and source when mapStyle.type is wms', async () => {
+    const params = { LAYERS: 'MyLayer' }
+    const result = await createMapStyleLayer({ url: 'https://wms.example.com/wms', type: 'wms', params }, null)
+    expect(TileLayer).toHaveBeenCalledWith({ source: mockWMSSourceInstance })
+    expect(result).toEqual({ layer: mockTileLayerInstance, source: mockWMSSourceInstance })
+  })
+
   it('creates a raster tile layer and source when mapStyle.type is raster', async () => {
     const result = await createMapStyleLayer({ url: 'https://tiles.example.com/{z}/{x}/{y}', type: 'raster' }, null)
     expect(TileLayer).toHaveBeenCalledWith({ source: mockSourceInstance })
@@ -210,6 +257,11 @@ describe('createMapStyleLayer', () => {
     expect(result).toEqual({ layer: mockVectorTileLayerInstance, source: mockVectorTileSourceInstance })
   })
 
+  it('throws when mapStyle.type is unsupported', async () => {
+    await expect(createMapStyleLayer({ url: styleUrl, type: 'unsupported' }, null))
+      .rejects.toThrow("Unsupported map style type: 'unsupported'")
+  })
+
   it('creates a vector tile layer and source when mapStyle.type is missing', async () => {
     const result = await createMapStyleLayer({ url: styleUrl }, null)
     expect(VectorTileLayer).toHaveBeenCalledWith({ source: mockVectorTileSourceInstance, declutter: true })

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

@@ -1,14 +1,14 @@
 .im-c-cross-hair {
-	position: absolute;
+  position: absolute;
   top: 0;
-	left: 0;
-	pointer-events: none;
-	margin: -19px 0 0 -19px;
+  left: 0;
+  pointer-events: none;
+  margin: -19px 0 0 -19px;
 }
 
 .im-c-cross-hair path {
-	stroke-width: 3;
-	stroke: var(--map-overlay-halo-color);
-	fill: var(--map-overlay-foreground-color);
-	paint-order: stroke fill;
+  stroke-width: 3;
+  stroke: var(--map-overlay-halo-color);
+  fill: var(--map-overlay-foreground-color);
+  paint-order: stroke fill;
 }

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

@@ -1,5 +1,5 @@
 // components/MapButton.jsx
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useCallback } from 'react'
 import { stringToKebab } from '../../../utils/stringToKebab'
 import { Tooltip } from '../Tooltip/Tooltip'
 import { Icon } from '../Icon/Icon'
@@ -116,7 +116,7 @@ const getControlledElement = ({ idPrefix, panelId, buttonId, hasMenu }) => {
  * @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 {Function} options.setButtonRef - Stable ref callback storing the button DOM node in buttonRefs
  * @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
@@ -133,7 +133,7 @@ const buildButtonProps = ({
   onClick,
   onKeyUp,
   onKeyDown,
-  buttonRefs,
+  setButtonRef,
   isDisabled,
   isPressed,
   isExpanded,
@@ -159,16 +159,12 @@ const buildButtonProps = ({
     onClick,
     onKeyUp,
     onKeyDown,
-    ref: (el) => {
-      if (buttonRefs.current && buttonId) {
-        buttonRefs.current[buttonId] = el
-      }
-    },
+    ref: setButtonRef,
     'aria-disabled': isDisabled || undefined,
     'aria-expanded': ariaExpanded,
     'aria-pressed': typeof isPressed === 'boolean' ? isPressed : undefined,
     'aria-controls': controlledElement?.id,
-    'aria-haspopup': controlledElement?.type === 'popup' || undefined,
+    'aria-haspopup': controlledElement?.type === 'popup' ? 'menu' : undefined,
     ...(href
       ? { href, target: '_blank', onKeyUp: handleKeyUp, role: 'button' }
       : { type: 'button' })
@@ -224,6 +220,14 @@ export const MapButton = ({
   const [menuRect, setMenuRect] = useState(null)
   const menuRef = useRef(null)
 
+  // Stable across renders so Preact doesn't detach/reattach it (and transiently
+  // null out buttonRefs.current[buttonId]) on every unrelated re-render of this button.
+  const setButtonRef = useCallback((el) => {
+    if (buttonRefs.current && buttonId) {
+      buttonRefs.current[buttonId] = el
+    }
+  }, [buttonRefs, buttonId])
+
   const Element = href ? 'a' : 'button'
   const hasMenu = menuItems?.length >= 1
   const showIcon = iconId || iconSvgContent || hasMenu
@@ -264,7 +268,7 @@ export const MapButton = ({
     onClick: handleButtonClick,
     onKeyUp: handleButtonKeyUp,
     onKeyDown: handleButtonKeyDown,
-    buttonRefs,
+    setButtonRef,
     isDisabled,
     isPressed,
     isExpanded,

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

@@ -172,7 +172,7 @@
 }
 
 // 4. State styles
-.im-c-map-button[aria-haspopup="true"][aria-expanded="true"] svg {
+.im-c-map-button[aria-haspopup="menu"][aria-expanded="true"] svg {
     transform: rotate(180deg);
 }
 

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

@@ -125,7 +125,7 @@ describe('MapButton', () => {
     renderButton({ idPrefix: 'prefix', menuItems: [{ label: 'Item' }] })
     const button = getButton()
     expect(button).toHaveAttribute('aria-controls', 'prefix-popup-test')
-    expect(button).toHaveAttribute('aria-haspopup', 'true')
+    expect(button).toHaveAttribute('aria-haspopup', 'menu')
   })
 
   it('toggles popup aria-expanded and startPos', () => {

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

@@ -145,6 +145,75 @@ describe('PopupMenu', () => {
     expect(mockSetIsOpen).toHaveBeenCalled()
   })
 
+  describe('Tab key focus handoff', () => {
+    let before, instigatorEl, after1, after2
+
+    beforeEach(() => {
+      before = document.createElement('button')
+      instigatorEl = document.createElement('button')
+      after1 = document.createElement('button')
+      after2 = document.createElement('button')
+      document.body.append(before, instigatorEl, after1, after2)
+      // jsdom never computes layout, so offsetParent is always null — findTabStop
+      // treats that as "hidden" and skips it, so it must be stubbed for these to look focusable.
+      ;[before, instigatorEl, after1, after2].forEach(el => Object.defineProperty(el, 'offsetParent', { value: true, configurable: true }))
+      mockUseApp.buttonRefs.current.instigator = instigatorEl
+    })
+
+    afterEach(() => {
+      [before, instigatorEl, after1, after2].forEach(el => el.remove())
+    })
+
+    it('moves focus to the tab stop after the instigator, not the first tab stop on the page', () => {
+      renderMenu()
+      fireEvent.keyDown(screen.getByRole('menu'), { key: 'Tab' })
+      expect(document.activeElement).toBe(after1)
+    })
+
+    it('Shift+Tab moves focus to the tab stop before the instigator', () => {
+      renderMenu()
+      fireEvent.keyDown(screen.getByRole('menu'), { key: 'Tab', shiftKey: true })
+      expect(document.activeElement).toBe(before)
+    })
+
+    it('falls back to computing the tab stop from the menu itself when the instigator is no longer available', () => {
+      mockUseApp.buttonRefs.current.instigator = null
+      renderMenu()
+      expect(() => fireEvent.keyDown(screen.getByRole('menu'), { key: 'Tab' })).not.toThrow()
+      expect(document.activeElement).toBe(before)
+      expect(mockUseApp.layoutRefs.viewportRef.current.focus).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Tab key inside a modal dialog', () => {
+    let dialogEl, insideBefore, instigatorEl, outsideAfter
+
+    beforeEach(() => {
+      dialogEl = document.createElement('div')
+      dialogEl.setAttribute('role', 'dialog')
+      dialogEl.setAttribute('aria-modal', 'true')
+      insideBefore = document.createElement('button')
+      instigatorEl = document.createElement('button')
+      dialogEl.append(insideBefore, instigatorEl)
+      outsideAfter = document.createElement('button')
+      document.body.append(dialogEl, outsideAfter)
+      ;[insideBefore, instigatorEl, outsideAfter].forEach(el => Object.defineProperty(el, 'offsetParent', { value: true, configurable: true }))
+      mockUseApp.buttonRefs.current.instigator = instigatorEl
+    })
+
+    afterEach(() => {
+      dialogEl.remove()
+      outsideAfter.remove()
+    })
+
+    it('wraps within the dialog instead of escaping to a tab stop outside it', () => {
+      renderMenu()
+      fireEvent.keyDown(screen.getByRole('menu'), { key: 'Tab' })
+      expect(document.activeElement).toBe(insideBefore)
+      expect(document.activeElement).not.toBe(outsideAfter)
+    })
+  })
+
   it('calls item onClick directly if no buttonConfig', () => {
     renderMenu()
     fireEvent.click(screen.getByText('Item 1'))
@@ -362,6 +431,16 @@ describe('PopupMenu', () => {
     expect(focusSpy).toHaveBeenCalled()
   })
 
+  it('Escape falls back to focusing viewport when instigator is no longer available', () => {
+    mockUseApp.buttonRefs.current.instigator = null
+    const focusSpy = jest.spyOn(mockUseApp.layoutRefs.viewportRef.current, 'focus')
+    renderMenu()
+    const ul = screen.getByRole('menu')
+    expect(() => fireEvent.keyDown(ul, { key: 'Escape' })).not.toThrow()
+    expect(focusSpy).toHaveBeenCalled()
+    focusSpy.mockRestore()
+  })
+
   it('direct render without startIndex respects startPos="first" (covers initializer and effect)', () => {
     renderDirect({ startPos: 'first' })
     expectSelected('Item 1')

package/src/App/components/PopupMenu/usePopupMenu.js

@@ -1,5 +1,6 @@
 import { useState, useMemo, useEffect } from 'react'
 import { stringToKebab } from '../../../utils/stringToKebab.js'
+import { findTabStop } from '../../../utils/findNextTabStop.js'
 import { useApp } from '../../store/appContext.js'
 
 /**
@@ -86,6 +87,54 @@ const resolveItemFocus = (item, buttonConfig) => ({
   keepFocus: buttonConfig[item.id]?.keepFocus ?? item.keepFocus
 })
 
+/**
+ * Focuses the instigator button if it's still in the DOM, otherwise falls back
+ * to the map viewport. The instigator can disappear while the menu is open
+ * (e.g. app state changes elsewhere remove/disable the triggering button),
+ * so callers must not assume it's still focusable.
+ *
+ * @param {HTMLElement|null} instigator - DOM node of the trigger button, may no longer exist.
+ * @param {object}           viewportRef - Ref to the map viewport element, used as fallback.
+ */
+const focusInstigatorOrViewport = (instigator, viewportRef) => {
+  if (instigator) {
+    instigator.focus()
+  } else {
+    viewportRef.current?.focus()
+  }
+}
+
+// A Panel rendered as a modal dialog (see Panel.jsx's computePanelState/getPanelRole)
+// carries both of these attributes together and traps focus within itself via
+// useModalPanelBehaviour's focusin redirect — tab-stop search must stay inside it.
+const MODAL_DIALOG_SELECTOR = '[role="dialog"][aria-modal="true"]'
+
+/**
+ * Moves focus to the tab stop immediately after (or before, for Shift+Tab)
+ * the instigator button, continuing the page's natural tab sequence rather
+ * than returning focus into the popup itself. The popup is rendered via a
+ * portal elsewhere in the DOM, so the browser's own Tab default action can't
+ * be relied on to continue from the instigator — it must be computed and
+ * applied manually. The search is scoped to the nearest modal dialog ancestor
+ * (if any): searching the whole document would let it pick a tab stop outside
+ * an open modal panel, which the app's own modal focus-trap then immediately
+ * yanks focus back from — landing on the trap's container div, which has no
+ * visible focus styling, making focus appear to vanish. Falls back to
+ * computing the tab stop from the menu element itself if the instigator is
+ * gone, so focus still lands on a real neighbouring control rather than
+ * jumping to an unrelated part of the app.
+ *
+ * @param {HTMLElement|null} instigator - DOM node of the trigger button, may no longer exist.
+ * @param {boolean}          isShiftTab - Whether Shift+Tab (move backwards) was pressed.
+ * @param {HTMLElement}      fallbackEl - Menu element to anchor from if the instigator is gone.
+ */
+const focusAdjacentTabStop = (instigator, isShiftTab, fallbackEl) => {
+  const anchor = instigator ?? fallbackEl
+  const root = anchor.closest?.(MODAL_DIALOG_SELECTOR) ?? document
+  const nextStop = findTabStop({ el: anchor, direction: isShiftTab ? 'prev' : 'next', root })
+  nextStop?.focus()
+}
+
 const handleMenuEnter = (event, { items, index, disabledButtons, activateCtx, instigator, dispatch, viewportRef, setIsOpen }) => {
   event.preventDefault()
   const item = items[index]
@@ -98,7 +147,7 @@ const handleMenuEnter = (event, { items, index, disabledButtons, activateCtx, in
     }
     activateItem(event, item, activateCtx)
     if (keepFocus) {
-      instigator.focus()
+      focusInstigatorOrViewport(instigator, viewportRef)
       setIsOpen(false)
       return
     }
@@ -122,7 +171,7 @@ const handleMenuSpace = (event, { items, index, disabledButtons, activateCtx, in
   activateItem(event, item, activateCtx)
   if (!(item.isPressed !== undefined || item.pressedWhen)) {
     if (keepFocus) {
-      instigator.focus()
+      focusInstigatorOrViewport(instigator, viewportRef)
     } else {
       requestAnimationFrame(() => viewportRef.current?.focus())
     }
@@ -149,11 +198,9 @@ const handleMenuSpace = (event, { items, index, disabledButtons, activateCtx, in
  * @returns {Function} onKeyDown handler for the menu element.
  */
 const createMenuKeyDownHandler = ({ items, visibleIndices, index, setIndex, disabledButtons, instigator, setIsOpen, activateCtx, dispatch, viewportRef }) => {
-  const closeAndFocus = (event, preventDefault = false) => {
-    if (preventDefault && event?.preventDefault) {
-      event.preventDefault()
-    }
-    instigator.focus()
+  const closeAndFocus = (event) => {
+    event.preventDefault()
+    focusInstigatorOrViewport(instigator, viewportRef)
     setIsOpen(false)
   }
 
@@ -179,11 +226,13 @@ const createMenuKeyDownHandler = ({ items, visibleIndices, index, setIndex, disa
 
   return (event) => {
     if (['Escape', 'Esc'].includes(event.key)) {
-      closeAndFocus(event, true)
+      closeAndFocus(event)
       return
     }
     if (event.key === 'Tab') {
-      closeAndFocus(event)
+      event.preventDefault()
+      focusAdjacentTabStop(instigator, event.shiftKey, event.currentTarget)
+      setIsOpen(false)
       return
     }
     if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
@@ -195,7 +244,7 @@ const createMenuKeyDownHandler = ({ items, visibleIndices, index, setIndex, disa
       return
     }
     if (event.key === 'End' && visibleIndices.length) {
-      setIndex(visibleIndices[visibleIndices.length - 1])
+      setIndex(visibleIndices[visibleIndices.length - 1]) // NOSONAR .length - 1 used instead of .at(-1) for wider browser support
       return
     }
     if (event.key === 'Enter') {
@@ -274,7 +323,7 @@ export const usePopupMenu = ({
     setIsOpen(false)
     activateItem(event, item, activateCtx)
     if (keepFocus) {
-      instigator.focus()
+      focusInstigatorOrViewport(instigator, viewportRef)
     } else {
       viewportRef.current?.focus()
     }
@@ -285,7 +334,7 @@ export const usePopupMenu = ({
     if (startPos === 'first') {
       setIndex(visibleIndices[0] ?? -1)
     } else if (startPos === 'last') {
-      setIndex(visibleIndices[visibleIndices.length - 1] ?? -1)
+      setIndex(visibleIndices[visibleIndices.length - 1] ?? -1) // NOSONAR .length - 1 used instead of .at(-1) for wider browser support
     } else {
       // No action
     }

package/src/App/hooks/useLayoutMeasurements.js

@@ -1,4 +1,4 @@
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, useMemo } from 'react'
 import { useResizeObserver } from './useResizeObserver.js'
 import { useApp } from '../store/appContext.js'
 import { useMap } from '../store/mapContext.js'
@@ -153,7 +153,15 @@ export function useLayoutMeasurements () {
   //    actions buttons, etc.). Safe zone is intentionally not dispatched here —
   //    that is Effect 2's responsibility.
   // --------------------------------
-  useResizeObserver([bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, bottomRef, bottomRightRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef, drawerRef], () => {
+  // Stable reference — all entries are ref objects from useApp that never change.
+  // Prevents useResizeObserver's effect from re-running (and cancelling its RAF)
+  // on every render due to a new array literal being passed each time.
+  const observedRefs = useMemo(
+    () => [bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, bottomRef, bottomRightRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef, drawerRef],
+    []
+  )
+
+  useResizeObserver(observedRefs, () => {
     calculateLayout(layoutRefs)
   })
 }

package/src/App/hooks/useResizeObserver.js

@@ -3,6 +3,8 @@ import { useEffect, useRef } from 'react'
 export function useResizeObserver (targetRefs, callback) {
   const frameRef = useRef()
   const prevSizes = useRef(new WeakMap()) // track sizes per element
+  const callbackRef = useRef(callback)
+  callbackRef.current = callback
 
   useEffect(() => {
     const refs = Array.isArray(targetRefs) ? targetRefs : [targetRefs]
@@ -33,7 +35,7 @@ export function useResizeObserver (targetRefs, callback) {
         // causing a ResizeObserver loop under synchronous renderers like preact.
         cancelAnimationFrame(frameRef.current)
         frameRef.current = requestAnimationFrame(() => {
-          for (const entry of changedEntries) { callback(entry) }
+          for (const entry of changedEntries) { callbackRef.current(entry) }
         })
       }
     })
@@ -46,7 +48,7 @@ export function useResizeObserver (targetRefs, callback) {
         cancelAnimationFrame(frameRef.current)
       }
     }
-  }, [targetRefs, callback])
+  }, [targetRefs]) // callback intentionally omitted — always read from callbackRef
 
   return { frameRef }
 }

package/src/InteractiveMap/InteractiveMap.js

@@ -225,8 +225,8 @@ export default class InteractiveMap {
         }
       })
 
-      updateDOMState(this)
-      this.eventBus.emit(events.APP_OPENED, { statePreserved: false })
+      const { isFullscreen } = updateDOMState(this)
+      this.eventBus.emit(events.APP_OPENED, { statePreserved: false, isFullscreen })
     } catch (err) {
       this._openButton?.removeAttribute('style')
       renderError(this.rootEl, this.config.genericErrorText)
@@ -304,9 +304,9 @@ export default class InteractiveMap {
       this._openButton.style.display = 'none'
     }
 
-    updateDOMState(this)
+    const { isFullscreen } = updateDOMState(this)
 
-    this.eventBus.emit(events.APP_OPENED, { statePreserved: true })
+    this.eventBus.emit(events.APP_OPENED, { statePreserved: true, isFullscreen })
   }
 
   /**

package/src/InteractiveMap/InteractiveMap.test.js

@@ -23,7 +23,7 @@ jest.mock('./behaviourController.js', () => ({
   setupBehavior: jest.fn(),
   shouldLoadComponent: jest.fn(() => true)
 }))
-jest.mock('./domStateManager.js', () => ({ updateDOMState: jest.fn(), removeLoadingState: jest.fn() }))
+jest.mock('./domStateManager.js', () => ({ updateDOMState: jest.fn().mockReturnValue({ isFullscreen: false }), removeLoadingState: jest.fn() }))
 jest.mock('./renderError.js', () => ({ renderError: jest.fn() }))
 jest.mock('../config/mergeConfig.js', () => ({ mergeConfig: jest.fn(cfg => cfg) }))
 const mockBreakpointDetector = {
@@ -183,7 +183,7 @@ describe('InteractiveMap — loadApp', () => {
     await map.loadApp()
     expect(map.on).toBe(originalOn)
     expect(typeof map.someMethod).toBe('function')
-    expect(map.eventBus.emit).toHaveBeenCalledWith('app:opened', { statePreserved: false })
+    expect(map.eventBus.emit).toHaveBeenCalledWith('app:opened', { statePreserved: false, isFullscreen: false })
   })
 })
 
@@ -436,7 +436,7 @@ describe('InteractiveMap — hideApp and showApp', () => {
     expect(map.rootEl.style.display).toBe('')
     expect(mockButtonInstance.style.display).toBe('none')
     expect(updateDOMState).toHaveBeenCalledWith(map)
-    expect(map.eventBus.emit).toHaveBeenCalledWith('app:opened', { statePreserved: true })
+    expect(map.eventBus.emit).toHaveBeenCalledWith('app:opened', { statePreserved: true, isFullscreen: false })
   })
 
   it('showApp: works without _openButton', () => {

package/src/InteractiveMap/behaviourController.js

@@ -1,6 +1,7 @@
 import { getQueryParam } from '../utils/queryString.js'
 import { isHybridFullscreen } from '../utils/getIsFullscreen.js'
 import { updateDOMState } from './domStateManager.js'
+import { EVENTS } from '../config/events.js'
 
 // -----------------------------------------------------------------------------
 // Public API
@@ -62,7 +63,8 @@ function setupBehavior (mapInstance) {
           mapInstance.loadApp()
         } else {
           // Map is showing - update DOM state for fullscreen/inline transition
-          updateDOMState(mapInstance)
+          const { isFullscreen } = updateDOMState(mapInstance)
+          mapInstance.eventBus.emit(EVENTS.APP_FULLSCREEN_CHANGE, { isFullscreen })
         }
       } else if (mapInstance._root) {
         mapInstance.hideApp()