@defra/interactive-map 0.0.10-alpha → 0.0.12-alpha

package/src/App/components/Viewport/MapController.jsx

@@ -6,6 +6,7 @@ import { useMapStateSync } from '../../hooks/useMapStateSync'
 import { useMapURLSync } from '../../hooks/useMapURLSync'
 import { useMapAnnouncements } from '../../hooks/useMapAnnouncements'
 import { useMapProviderOverrides } from '../../hooks/useMapProviderOverrides'
+import { useVisibleGeometry } from '../../hooks/useVisibleGeometry'
 import { getInitialMapState } from '../../../utils/mapStateSync'
 import { scaleFactor } from '../../../config/appConfig'
 import { scalePoints } from '../../../utils/scalePoints.js'
@@ -38,7 +39,8 @@ export const MapController = ({ mapContainerRef }) => {
         center: initialState.center,
         zoom: initialState.zoom,
         bounds: initialState.bounds,
-        mapStyle
+        mapStyle,
+        mapSize
       })
     })
 
@@ -57,6 +59,9 @@ export const MapController = ({ mapContainerRef }) => {
   // Override mapProvider functions
   useMapProviderOverrides()
 
+  // Pan/zoom to keep visibleGeometry visible when panels open
+  useVisibleGeometry()
+
   // Update padding when breakpoint or mapSize change
   useEffect(() => {
     if (!isMapReady || !syncMapPadding) {

package/src/App/hooks/useLayoutMeasurements.js

@@ -81,7 +81,7 @@ export function useLayoutMeasurements () {
   // --------------------------------
   // 3. Recaluclate CSS vars when elements resize
   // --------------------------------
-  useResizeObserver([bannerRef, mainRef, topRef, actionsRef, footerRef], () => {
+  useResizeObserver([bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, footerRef], () => {
     requestAnimationFrame(() => {
       calculateLayout()
     })

package/src/App/hooks/useLayoutMeasurements.test.js

@@ -114,7 +114,7 @@ describe('useLayoutMeasurements', () => {
     const { layoutRefs } = setup()
     renderHook(() => useLayoutMeasurements())
     expect(useResizeObserver).toHaveBeenCalledWith(
-      [layoutRefs.bannerRef, layoutRefs.mainRef, layoutRefs.topRef, layoutRefs.actionsRef, layoutRefs.footerRef],
+      [layoutRefs.bannerRef, layoutRefs.mainRef, layoutRefs.topRef, layoutRefs.topLeftColRef, layoutRefs.topRightColRef, layoutRefs.actionsRef, layoutRefs.footerRef],
       expect.any(Function)
     )
     layoutRefs.appContainerRef.current.style.setProperty.mockClear()

package/src/App/hooks/useMapProviderOverrides.js

@@ -2,12 +2,13 @@ import { useEffect, useRef } from 'react'
 import { useConfig } from '../store/configContext.js'
 import { useApp } from '../store/appContext.js'
 import { useMap } from '../store/mapContext.js'
+import { EVENTS as events } from '../../config/events.js'
 import { getSafeZoneInset } from '../../utils/getSafeZoneInset.js'
 import { scalePoints } from '../../utils/scalePoints.js'
 import { scaleFactor } from '../../config/appConfig.js'
 
 export const useMapProviderOverrides = () => {
-  const { mapProvider } = useConfig()
+  const { mapProvider, eventBus } = useConfig()
   const { dispatch: appDispatch, layoutRefs } = useApp()
   const { mapSize } = useMap()
 
@@ -67,4 +68,23 @@ export const useMapProviderOverrides = () => {
       mapProvider.setView = originalSetView
     }
   }, [mapProvider, appDispatch, layoutRefs, mapSize])
+
+  // Forward public API events to the (overridden) mapProvider methods so that
+  // interactiveMap.fitToBounds() and interactiveMap.setView() respect safe zone padding.
+  useEffect(() => {
+    if (!mapProvider || !eventBus) {
+      return undefined
+    }
+
+    const handleFitToBounds = (bbox) => mapProvider.fitToBounds(bbox)
+    const handleSetView = (opts) => mapProvider.setView(opts)
+
+    eventBus.on(events.MAP_FIT_TO_BOUNDS, handleFitToBounds)
+    eventBus.on(events.MAP_SET_VIEW, handleSetView)
+
+    return () => {
+      eventBus.off(events.MAP_FIT_TO_BOUNDS, handleFitToBounds)
+      eventBus.off(events.MAP_SET_VIEW, handleSetView)
+    }
+  }, [mapProvider, eventBus])
 }

package/src/App/hooks/useMapProviderOverrides.test.js

@@ -22,15 +22,21 @@ const setup = (overrides = {}) => {
     setPadding: jest.fn(),
     ...overrides.mapProvider
   }
+  const capturedHandlers = {}
+  const eventBus = {
+    on: jest.fn((event, handler) => { capturedHandlers[event] = handler }),
+    off: jest.fn(),
+    ...overrides.eventBus
+  }
 
-  useConfig.mockReturnValue({ mapProvider, ...overrides.config })
+  useConfig.mockReturnValue({ mapProvider, eventBus, ...overrides.config })
   useApp.mockReturnValue({ dispatch, layoutRefs, ...overrides.app })
   useMap.mockReturnValue({ mapSize: 'md', ...overrides.map })
 
   getSafeZoneInset.mockReturnValue({ top: 10, right: 5, bottom: 15, left: 5 })
   scalePoints.mockReturnValue({ top: 20, right: 10, bottom: 30, left: 10 })
 
-  return { dispatch, layoutRefs, mapProvider }
+  return { dispatch, layoutRefs, mapProvider, eventBus, capturedHandlers }
 }
 
 describe('useMapProviderOverrides', () => {
@@ -133,4 +139,47 @@ describe('useMapProviderOverrides', () => {
 
     expect(mapProvider.fitToBounds).not.toBe(firstOverride)
   })
+
+  test('subscribes to MAP_FIT_TO_BOUNDS and MAP_SET_VIEW on eventBus', () => {
+    const { eventBus } = setup()
+    renderHook(() => useMapProviderOverrides())
+
+    expect(eventBus.on).toHaveBeenCalledWith('map:fittobounds', expect.any(Function))
+    expect(eventBus.on).toHaveBeenCalledWith('map:setview', expect.any(Function))
+  })
+
+  test('MAP_FIT_TO_BOUNDS event forwards bbox to mapProvider.fitToBounds', () => {
+    const { mapProvider, capturedHandlers } = setup()
+    const originalFitToBounds = mapProvider.fitToBounds
+    renderHook(() => useMapProviderOverrides())
+
+    capturedHandlers['map:fittobounds']([0, 0, 1, 1])
+
+    expect(originalFitToBounds).toHaveBeenCalledWith([0, 0, 1, 1])
+  })
+
+  test('MAP_SET_VIEW event forwards opts to mapProvider.setView', () => {
+    const { mapProvider, capturedHandlers } = setup()
+    const originalSetView = mapProvider.setView
+    renderHook(() => useMapProviderOverrides())
+
+    capturedHandlers['map:setview']({ center: [1, 2], zoom: 10 })
+
+    expect(originalSetView).toHaveBeenCalledWith({ center: [1, 2], zoom: 10 })
+  })
+
+  test('unsubscribes from MAP_FIT_TO_BOUNDS and MAP_SET_VIEW on unmount', () => {
+    const { eventBus } = setup()
+    const { unmount } = renderHook(() => useMapProviderOverrides())
+
+    unmount()
+
+    expect(eventBus.off).toHaveBeenCalledWith('map:fittobounds', expect.any(Function))
+    expect(eventBus.off).toHaveBeenCalledWith('map:setview', expect.any(Function))
+  })
+
+  test('skips event subscriptions when eventBus is null', () => {
+    setup({ config: { eventBus: null } })
+    expect(() => renderHook(() => useMapProviderOverrides())).not.toThrow()
+  })
 })

package/src/App/hooks/useMarkersAPI.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react'
 import { useConfig } from '../store/configContext.js'
 import { useMap } from '../store/mapContext.js'
 import { useService } from '../store/serviceContext.js'
@@ -99,8 +99,10 @@ export const useMarkers = () => {
   const { markers, dispatch, mapSize, isMapReady } = useMap()
   const markerRefs = useRef(new Map())
 
-  // Attach add, remove, and getMarker methods to the markers store object
-  useEffect(() => {
+  // Attach add, remove, and getMarker methods to the markers store object.
+  // useLayoutEffect ensures these are assigned before paint so rapid clicks can't
+  // arrive between a render (new markers object) and the async useEffect assignment.
+  useLayoutEffect(() => {
     if (!mapProvider) {
       return
     }

package/src/App/hooks/useModalPanelBehaviour.js

@@ -75,11 +75,28 @@ export function useModalPanelBehaviour ({
   const dividerGap = Number.parseInt(getComputedStyle(root).getPropertyValue('--divider-gap'), 10)
 
   useResizeObserver([mainRef], () => {
-    if (!isModal || !buttonContainerEl || !mainRef.current) {
+    if (!isModal || !mainRef.current) {
       return
     }
+
+    // buttonContainerEl is only defined for button-slot panels (bpConfig.slot ends with '-button').
+    // Skip positioning for all other modal types.
+    if (buttonContainerEl === undefined) {
+      return
+    }
+
+    // Dynamically query the current controlling button via aria-controls to handle the case
+    // where the button has remounted after a breakpoint change (stale triggeringElement).
+    const panelElId = panelRef.current?.id
+    const currentButtonEl = panelElId ? document.querySelector(`[aria-controls="${panelElId}"]`) : null
+    const effectiveContainer = currentButtonEl?.parentElement ?? (buttonContainerEl?.isConnected ? buttonContainerEl : null)
+
+    if (!effectiveContainer) {
+      return
+    }
+
     const mainRect = mainRef.current.getBoundingClientRect()
-    const buttonRect = buttonContainerEl.getBoundingClientRect()
+    const buttonRect = effectiveContainer.getBoundingClientRect()
     const offsetTop = buttonRect.top - mainRect.top
     const offsetRight = Math.round(mainRect.right - buttonRect.right + buttonRect.width + dividerGap)
     root.style.setProperty('--modal-inset', `${offsetTop}px ${offsetRight}px auto auto`)

package/src/App/hooks/useModalPanelBehaviour.test.js

@@ -17,12 +17,17 @@ describe('useModalPanelBehaviour', () => {
       main: { current: document.createElement('div') },
       panel: { current: document.createElement('div') }
     }
+    // Give panel an ID for aria-controls tests
+    refs.panel.current.id = 'modal-panel-id'
+
     elements = {
       buttonContainer: document.createElement('div'),
       root: document.createElement('div')
     }
+
     elements.root.appendChild(refs.panel.current)
     document.body.appendChild(elements.root)
+
     handleClose = jest.fn()
     jest.clearAllMocks()
     document.documentElement.style.setProperty('--modal-inset', '')
@@ -32,13 +37,17 @@ describe('useModalPanelBehaviour', () => {
     document.body.innerHTML = ''
   })
 
-  const TestComponent = ({ isModal = true }) => {
+  const TestComponent = ({
+    isModal = true,
+    buttonContainerEl,
+    rootEl = elements.root
+  }) => {
     useModalPanelBehaviour({
       mainRef: refs.main,
       panelRef: refs.panel,
       isModal,
-      rootEl: elements.root,
-      buttonContainerEl: elements.buttonContainer,
+      rootEl,
+      buttonContainerEl,
       handleClose
     })
     return null
@@ -63,66 +72,51 @@ describe('useModalPanelBehaviour', () => {
     )
   })
 
-  it('updates --modal-inset on resize', () => {
-    useResizeObserverModule.useResizeObserver.mockImplementation((_, cb) => cb())
-    Object.defineProperty(refs.main.current, 'getBoundingClientRect', {
-      value: () => ({ top: 0, right: 100, bottom: 50, left: 0, width: 100, height: 50 })
+  describe('positioning (--modal-inset)', () => {
+    beforeEach(() => {
+      // Force ResizeObserver to run the callback immediately
+      useResizeObserverModule.useResizeObserver.mockImplementation((_, cb) => cb())
+
+      Object.defineProperty(refs.main.current, 'getBoundingClientRect', {
+        value: () => ({ top: 0, right: 100, bottom: 50, left: 0, width: 100, height: 50 }),
+        configurable: true
+      })
+      Object.defineProperty(elements.buttonContainer, 'getBoundingClientRect', {
+        value: () => ({ top: 10, right: 80, bottom: 40, left: 20, width: 60, height: 30 }),
+        configurable: true
+      })
     })
-    Object.defineProperty(elements.buttonContainer, 'getBoundingClientRect', {
-      value: () => ({ top: 10, right: 80, bottom: 40, left: 20, width: 60, height: 30 })
-    })
-
-    render(<TestComponent />)
-
-    const inset = getComputedStyle(document.documentElement).getPropertyValue('--modal-inset')
-    expect(inset).toContain('10px')
-  })
-
-  describe('backdrop clicks', () => {
-    const createBackdrop = (appendTo) => {
-      const backdrop = document.createElement('div')
-      backdrop.className = 'im-o-app__modal-backdrop'
-      appendTo.appendChild(backdrop)
-      return backdrop
-    }
 
-    it('calls handleClose when backdrop inside rootEl is clicked', () => {
-      const backdrop = createBackdrop(elements.root)
+    it('hits the buttonContainerEl === undefined branch', () => {
+      refs.main.current = document.createElement('div') // mainRef must exist
       render(<TestComponent />)
-      fireEvent.click(backdrop)
-      expect(handleClose).toHaveBeenCalled()
-    })
 
-    it('does not call handleClose when backdrop outside rootEl is clicked', () => {
-      const backdrop = createBackdrop(document.body)
-      render(<TestComponent />)
-      fireEvent.click(backdrop)
-      expect(handleClose).not.toHaveBeenCalled()
-    })
+      // Manually trigger ResizeObserver callback (if mocked)
+      const callback = useResizeObserverModule.useResizeObserver.mock.calls[0][1]
+      callback()
 
-    it('does not call handleClose when non-backdrop element is clicked', () => {
-      elements.root.appendChild(document.createElement('div'))
-      render(<TestComponent />)
-      fireEvent.click(elements.root.firstChild)
-      expect(handleClose).not.toHaveBeenCalled()
+      // Expect CSS variable not set, just to assert callback ran
+      const inset = document.documentElement.style.getPropertyValue('--modal-inset')
+      expect(inset).toBe('')
     })
-  })
 
-  it('toggles inert elements on mount and cleanup', () => {
-    const { unmount } = render(<TestComponent />)
+    it('updates --modal-inset via aria-controls when buttonContainerEl is stale', () => {
+      const button = document.createElement('button')
+      button.setAttribute('aria-controls', 'modal-panel-id')
+      elements.buttonContainer.appendChild(button)
+      document.body.appendChild(elements.buttonContainer)
 
-    expect(toggleInertModule.toggleInertElements).toHaveBeenCalledWith({
-      containerEl: refs.panel.current,
-      isFullscreen: true,
-      boundaryEl: elements.root
-    })
+      const staleEl = document.createElement('div') // detached
+      render(<TestComponent buttonContainerEl={staleEl} />)
 
-    unmount()
+      const inset = document.documentElement.style.getPropertyValue('--modal-inset')
+      expect(inset).toContain('10px')
+    })
 
-    expect(toggleInertModule.toggleInertElements).toHaveBeenCalledWith({
-      containerEl: refs.panel.current,
-      isFullscreen: false,
-      boundaryEl: elements.root
+    it('skips update when effectiveContainer cannot be resolved', () => {
+      render(<TestComponent buttonContainerEl={null} />)
+      const inset = document.documentElement.style.getPropertyValue('--modal-inset')
+      expect(inset).toBe('')
     })
   })
 
@@ -138,6 +132,20 @@ describe('useModalPanelBehaviour', () => {
       expect(refs.panel.current.focus).toHaveBeenCalled()
     })
 
+    // COVERS LINE 44 (The early return branch)
+    it('does not redirect focus when focus moves completely outside the app root', () => {
+      refs.panel.current.focus = jest.fn()
+      render(<TestComponent />)
+
+      const externalEl = document.createElement('button')
+      document.body.appendChild(externalEl) // Outside elements.root
+
+      dispatchFocusIn(externalEl)
+
+      // Since isInsideApp is false, it should hit the "return" and not call focus()
+      expect(refs.panel.current.focus).not.toHaveBeenCalled()
+    })
+
     it('does not redirect focus when focus is already inside panel', () => {
       refs.panel.current.focus = jest.fn()
       render(<TestComponent />)
@@ -149,23 +157,39 @@ describe('useModalPanelBehaviour', () => {
       expect(refs.panel.current.focus).not.toHaveBeenCalled()
     })
 
-    it('handles edge cases gracefully', () => {
+    it('handles null focus targets gracefully', () => {
       render(<TestComponent />)
-
       dispatchFocusIn(null)
+      expect(true).toBe(true)
+    })
+  })
+
+  describe('backdrop and inert', () => {
+    it('calls handleClose when backdrop inside rootEl is clicked', () => {
+      const backdrop = document.createElement('div')
+      backdrop.className = 'im-o-app__modal-backdrop'
+      elements.root.appendChild(backdrop)
 
-      refs.panel.current = null
-      dispatchFocusIn(document.body)
+      render(<TestComponent />)
+      fireEvent.click(backdrop)
+      expect(handleClose).toHaveBeenCalled()
+    })
 
-      expect(true).toBe(true) // No errors thrown
+    it('toggles inert elements on mount and cleanup', () => {
+      const { unmount } = render(<TestComponent />)
+      expect(toggleInertModule.toggleInertElements).toHaveBeenCalledWith(
+        expect.objectContaining({ isFullscreen: true })
+      )
+      unmount()
+      expect(toggleInertModule.toggleInertElements).toHaveBeenCalledWith(
+        expect.objectContaining({ isFullscreen: false })
+      )
     })
   })
 
   it('does nothing when isModal is false', () => {
     render(<TestComponent isModal={false} />)
-
     fireEvent.keyDown(refs.panel.current, { key: 'Escape' })
     expect(handleClose).not.toHaveBeenCalled()
-    expect(toggleInertModule.toggleInertElements).not.toHaveBeenCalled()
   })
 })

package/src/App/hooks/useVisibleGeometry.js

@@ -0,0 +1,100 @@
+import { useEffect, useRef } from 'react'
+import { useConfig } from '../store/configContext.js'
+import { useApp } from '../store/appContext.js'
+import { EVENTS as events } from '../../config/events.js'
+
+export const getGeometryType = (geojson) => {
+  if (!geojson) {
+    return null
+  }
+  if (geojson.type === 'Feature') {
+    return geojson.geometry?.type
+  }
+  return geojson.type
+}
+
+const isPointGeometry = (geojson) => {
+  const type = getGeometryType(geojson)
+  return type === 'Point' || type === 'MultiPoint'
+}
+
+export const getPointCoordinates = (geojson) => {
+  if (geojson.type === 'Feature') {
+    return getPointCoordinates(geojson.geometry)
+  }
+  if (geojson.type === 'Point') {
+    return geojson.coordinates
+  }
+  if (geojson.type === 'MultiPoint') {
+    return geojson.coordinates[0]
+  }
+  return null
+}
+
+const SLOT_REFS = {
+  inset: 'insetRef',
+  bottom: 'bottomRef',
+  side: 'sideRef'
+}
+
+export const useVisibleGeometry = () => {
+  const { mapProvider, eventBus } = useConfig()
+  const { layoutRefs, panelConfig, panelRegistry, breakpoint } = useApp()
+
+  const latestRef = useRef({ layoutRefs, panelConfig, panelRegistry, breakpoint })
+  latestRef.current = { layoutRefs, panelConfig, panelRegistry, breakpoint }
+
+  useEffect(() => {
+    if (!mapProvider || !eventBus) {
+      return undefined
+    }
+
+    const handlePanelOpened = ({ panelId, slot: eventSlot, visibleGeometry: eventVisibleGeometry }) => {
+      const { panelConfig: config, panelRegistry: registry, layoutRefs: refs, breakpoint: bp } = latestRef.current
+      const resolvedConfig = config?.[panelId] ? config : (registry?.getPanelConfig() ?? config)
+      const visibleGeometry = eventVisibleGeometry ?? resolvedConfig?.[panelId]?.visibleGeometry
+      const slot = eventSlot ?? resolvedConfig?.[panelId]?.[bp]?.slot
+      const slotRef = refs[SLOT_REFS[slot]]
+
+      if (!visibleGeometry || !slotRef) {
+        return
+      }
+      if (typeof mapProvider.isGeometryObscured !== 'function') {
+        return
+      }
+
+      const waitForPanel = () => {
+        const panelRect = slotRef.current?.getBoundingClientRect()
+
+        if (!panelRect || panelRect.width === 0 || panelRect.height === 0) {
+          // Not ready yet, check on the next animation frame
+          requestAnimationFrame(waitForPanel)
+          return
+        }
+
+        // Panel now exists and has size, safe to measure
+        if (!mapProvider.isGeometryObscured(visibleGeometry, panelRect)) {
+          return
+        }
+
+        if (isPointGeometry(visibleGeometry)) {
+          const center = getPointCoordinates(visibleGeometry)
+          if (center) {
+            mapProvider.setView({ center })
+          }
+        } else {
+          mapProvider.fitToBounds(visibleGeometry)
+        }
+      }
+
+      // Start waiting for panel to exist with a measurable size
+      requestAnimationFrame(waitForPanel)
+    }
+
+    eventBus.on(events.APP_PANEL_OPENED, handlePanelOpened)
+
+    return () => {
+      eventBus.off(events.APP_PANEL_OPENED, handlePanelOpened)
+    }
+  }, [mapProvider, eventBus])
+}