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

package/src/InteractiveMap/behaviourController.test.js

@@ -7,7 +7,7 @@ import * as queryString from '../utils/queryString.js'
 import { updateDOMState } from './domStateManager.js'
 
 jest.mock('../utils/queryString.js')
-jest.mock('./domStateManager.js', () => ({ updateDOMState: jest.fn() }))
+jest.mock('./domStateManager.js', () => ({ updateDOMState: jest.fn().mockReturnValue({ isFullscreen: false }) }))
 
 describe('shouldLoadComponent', () => {
   beforeEach(() => {
@@ -67,7 +67,8 @@ describe('setupBehavior', () => {
       loadApp: jest.fn(),
       removeApp: jest.fn(),
       hideApp: jest.fn(),
-      showApp: jest.fn()
+      showApp: jest.fn(),
+      eventBus: { emit: jest.fn() }
     }
     // Default: viewport is wide
     window.matchMedia = jest.fn().mockImplementation(() => ({
@@ -187,14 +188,16 @@ describe('setupBehavior', () => {
       expect(mockMapInstance.showApp).not.toHaveBeenCalled()
     })
 
-    it('calls updateDOMState when map is showing and should load', () => {
+    it('calls updateDOMState and emits APP_FULLSCREEN_CHANGE when map is showing and should load', () => {
       mockMapInstance._isHidden = false
       mockMapInstance._root = {} // has root
       queryString.getQueryParam.mockReturnValue(null)
+      updateDOMState.mockReturnValue({ isFullscreen: false })
 
       handleChange()
 
       expect(updateDOMState).toHaveBeenCalledWith(mockMapInstance)
+      expect(mockMapInstance.eventBus.emit).toHaveBeenCalledWith('app:fullscreenchange', { isFullscreen: false })
       expect(mockMapInstance.loadApp).not.toHaveBeenCalled()
       expect(mockMapInstance.showApp).not.toHaveBeenCalled()
     })

package/src/InteractiveMap/domStateManager.js

@@ -70,6 +70,8 @@ function updateDOMState (mapInstance, { isFullscreen: isFullscreenOverride } = {
     ? 'auto'
     : containerHeight
   rootEl.style.height = isFullscreen ? '100%' : height
+
+  return { isFullscreen }
 }
 
 /**

package/src/config/events.js

@@ -69,11 +69,13 @@ export const EVENTS = {
    * Fired after initial load (`loadApp`) and when the app is shown again after being hidden (`showApp`).
    * Subscribe to this event to react whenever the map becomes visible to the user.
    *
-   * Payload: `{ statePreserved: boolean }` — `true` if the map state was preserved from a previous session.
+   * Payload:
+   * - `statePreserved: boolean` — `true` if the map state was preserved from a previous session.
+   * - `isFullscreen: boolean` — `true` if the map opened in fullscreen mode, `false` if inline.
    *
    * @example
-   * map.on(EVENTS.APP_OPENED, ({ statePreserved }) => {
-   *   console.log('Map opened, state preserved:', statePreserved)
+   * map.on(EVENTS.APP_OPENED, ({ isFullscreen, statePreserved }) => {
+   *   console.log('Map opened, fullscreen:', isFullscreen, 'state preserved:', statePreserved)
    * })
    */
   APP_OPENED: 'app:opened',
@@ -93,6 +95,22 @@ export const EVENTS = {
    */
   APP_CLOSED: 'app:closed',
 
+  /**
+   * Emitted when the map transitions between fullscreen and inline display while already visible.
+   *
+   * Fired during viewport resize in `hybrid` behaviour when the map crosses the fullscreen/inline
+   * threshold without being hidden and re-shown. Use this alongside `app:opened` and `app:closed`
+   * to track the map's display mode across all transitions.
+   *
+   * Payload: `{ isFullscreen: boolean }` — `true` if the map is now fullscreen, `false` if inline.
+   *
+   * @example
+   * map.on(EVENTS.APP_FULLSCREEN_CHANGE, ({ isFullscreen }) => {
+   *   console.log('Display mode changed, fullscreen:', isFullscreen)
+   * })
+   */
+  APP_FULLSCREEN_CHANGE: 'app:fullscreenchange',
+
   /**
    * Emitted when a panel is opened.
    * Payload: { panelId: string }

package/src/types.js

@@ -403,18 +403,27 @@
  * Falls back to `#0b0c0c` (light) or `#ffffff` (dark).
  * Injected as the `--map-overlay-foreground-color` CSS custom property.
  *
- * @property {'raster' | 'ogc-vt'} [type]
+ * @property {'vector' | 'raster' | 'wms' | 'ogc-vt'} [type]
  * Tile layer type. Controls how the map provider constructs the basemap source. Omit (or leave
  * undefined) for the default Mapbox GL vector tile path. The OpenLayers provider supports all
- * three types, enabling raster, standard vector tile, and OGC vector tile basemaps:
+ * four types, enabling raster, WMS, standard vector tile, and OGC vector tile basemaps:
  * - `'raster'` — XYZ raster tile source; `url` should be a tile URL template.
+ * - `'vector'` — Mapbox GL vector tile path; `url` should point to a Mapbox GL style document.
+ * - `'wms'` — WMS raster tile source; `url` should be the WMS service endpoint and `params`
+ *   should provide the WMS request parameters.
+ *   **Currently only supported by the OpenLayers provider.**
  * - `'ogc-vt'` — OGC API - Tiles vector tile source; `url` should point to an OGC style endpoint
  *   that returns a Mapbox GL style document. **Currently only supported by the OpenLayers provider.**
  *
  * @property {string} url
  * URL for the style. For the default vector tile path and `'ogc-vt'`, this should be a URL that
  * returns a Mapbox GL style document (Mapbox Style Specification). For `'raster'`, this should
- * be an XYZ tile URL template with `{x}`, `{y}`, `{z}` placeholders.
+ * be an XYZ tile URL template with `{x}`, `{y}`, `{z}` placeholders. For `'wms'`, this should
+ * be the WMS service endpoint (the GetMap URL).
+ *
+ * @property {Object} [params]
+ * WMS request parameters. Passed directly to the OpenLayers `TileWMS` source when `type` is `'wms'`.
+ * Most WMS GetMap requests should include `LAYERS`. Example: `{ LAYERS: 'MyLayer', FORMAT: 'image/jpeg' }`.
  */
 
 /**

package/src/utils/findNextTabStop.js

@@ -1,7 +1,7 @@
-export function findTabStop ({ el, direction }) {
-  const focusableEls = document.querySelectorAll('input, button, select, textarea, a[href]')
+export function findTabStop ({ el, direction, root = document }) {
+  const focusableEls = root.querySelectorAll('input, button, select, textarea, a[href]')
   const list = Array.prototype.filter.call(focusableEls, item => {
-    return item.tabIndex >= 0
+    return item.tabIndex >= 0 && !!item.offsetParent
   })
   const index = list.indexOf(el)
   return list[direction === 'next' ? index + 1 : index - 1] || list[0]

package/src/utils/findNextTabStop.test.js

@@ -7,9 +7,10 @@ import { findTabStop } from './findNextTabStop.js'
 // --- MOCK SETUP ---
 // Helper to create mock elements. The default value (tabIndex = 0)
 // is covered below by creating 'el1' without the second argument.
-const createMockElement = (id, tabIndex = 0) => ({
+const createMockElement = (id, tabIndex = 0, offsetParent = {}) => ({
   id,
   tabIndex,
+  offsetParent,
   // Required so Jest knows which element is which in the array lookup
   toString: () => id
 })
@@ -74,4 +75,27 @@ describe('findTabStop', () => {
     // Assert: It wraps around to the first element, el1.
     expect(result).toBe(el1)
   })
+
+  // Test 4: Covers: skipping elements with no offsetParent (hidden, e.g. wrong-breakpoint duplicates).
+  it('should skip hidden elements (no offsetParent) even when tabIndex is valid', () => {
+    const el1 = createMockElement('el1', 0)
+    const hiddenEl = createMockElement('hidden', 0, null)
+    const el3 = createMockElement('el3', 0)
+
+    mockFocusableElements([el1, hiddenEl, el3])
+
+    const result = findTabStop({ el: el1, direction: 'next' })
+
+    expect(result).toBe(el3)
+  })
+
+  it('accepts a custom root to scope the search', () => {
+    const el1 = createMockElement('el1')
+    const scopedRoot = { querySelectorAll: jest.fn(() => [el1]) }
+
+    findTabStop({ el: el1, direction: 'next', root: scopedRoot })
+
+    expect(scopedRoot.querySelectorAll).toHaveBeenCalledTimes(1)
+    expect(document.querySelectorAll).not.toHaveBeenCalled()
+  })
 })

package/webpack.dev.mjs

@@ -87,6 +87,7 @@ export default {
         NGD_BLACK_AND_WHITE_URL_27700: JSON.stringify(process.env.NGD_BLACK_AND_WHITE_URL_27700),
         // Aerial photography
         AERIAL_URL: JSON.stringify(process.env.AERIAL_URL),
+        APGB_WMS_URL: JSON.stringify(process.env.APGB_WMS_URL),
         // OS Maps API (27700 raster)
         MAPS_OUTDOOR_URL: JSON.stringify(process.env.MAPS_OUTDOOR_URL),
         MAPS_ROAD_URL: JSON.stringify(process.env.MAPS_ROAD_URL),