@defra/interactive-map 0.0.11-alpha → 0.0.14-alpha

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

@@ -4,10 +4,17 @@ import { useModalPanelBehaviour } from './useModalPanelBehaviour.js'
 import * as useResizeObserverModule from './useResizeObserver.js'
 import * as constrainFocusModule from '../../utils/constrainKeyboardFocus.js'
 import * as toggleInertModule from '../../utils/toggleInertElements.js'
+import { useApp } from '../store/appContext.js'
 
 jest.mock('./useResizeObserver.js')
 jest.mock('../../utils/constrainKeyboardFocus.js')
 jest.mock('../../utils/toggleInertElements.js')
+jest.mock('../store/appContext.js')
+
+const MODAL_INSET = '--modal-inset'
+const MODAL_MAX_HEIGHT = '--modal-max-height'
+const PANEL_ID = 'modal-panel-id'
+const ARIA_CONTROLS = 'aria-controls'
 
 describe('useModalPanelBehaviour', () => {
   let refs, elements, handleClose
@@ -17,28 +24,40 @@ describe('useModalPanelBehaviour', () => {
       main: { current: document.createElement('div') },
       panel: { current: document.createElement('div') }
     }
+    // Give panel an ID for aria-controls tests and a slot for setSlotCSSVar
+    refs.panel.current.id = PANEL_ID
+    refs.panel.current.dataset.slot = 'inset'
+
     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', '')
+    document.documentElement.style.setProperty(MODAL_INSET, '')
+    document.documentElement.style.setProperty(MODAL_MAX_HEIGHT, '')
+    useApp.mockReturnValue({ layoutRefs: {} })
   })
 
   afterEach(() => {
     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 +82,139 @@ 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, --modal-max-height)', () => {
+    const buttonSlot = 'map-styles-button'
+
+    beforeEach(() => {
+      // Force ResizeObserver to run the callback immediately
+      useResizeObserverModule.useResizeObserver.mockImplementation((_, cb) => cb())
+      jest.spyOn(globalThis, 'getComputedStyle').mockReturnValue({ getPropertyValue: () => '8' })
+
+      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 })
+
+    afterEach(() => {
+      jest.restoreAllMocks()
     })
 
-    render(<TestComponent />)
+    it('sets --modal-inset via SLOT_MODAL_VARS for top slot', () => {
+      refs.panel.current.dataset.slot = 'left-top'
+      render(<TestComponent />)
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET))
+        .toBe('var(--left-offset-top) auto auto var(--primary-gap)')
+      expect(document.documentElement.style.getPropertyValue(MODAL_MAX_HEIGHT))
+        .toBe('var(--left-top-max-height)')
+    })
 
-    const inset = getComputedStyle(document.documentElement).getPropertyValue('--modal-inset')
-    expect(inset).toContain('10px')
-  })
+    it('sets --modal-inset via SLOT_MODAL_VARS for bottom slot', () => {
+      refs.panel.current.dataset.slot = 'left-bottom'
+      render(<TestComponent />)
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET))
+        .toBe('auto auto var(--left-offset-bottom) var(--primary-gap)')
+      expect(document.documentElement.style.getPropertyValue(MODAL_MAX_HEIGHT))
+        .toBe('var(--left-top-max-height)')
+    })
 
-  describe('backdrop clicks', () => {
-    const createBackdrop = (appendTo) => {
-      const backdrop = document.createElement('div')
-      backdrop.className = 'im-o-app__modal-backdrop'
-      appendTo.appendChild(backdrop)
-      return backdrop
-    }
+    it('sets --modal-inset and --modal-max-height from slot container when no buttonContainerEl', () => {
+      const insetEl = document.createElement('div')
+      Object.defineProperty(insetEl, 'getBoundingClientRect', {
+        value: () => ({ top: 60, left: 8, right: 200, bottom: 200 }),
+        configurable: true
+      })
+      Object.defineProperty(insetEl, 'offsetWidth', { value: 192, configurable: true })
+      useApp.mockReturnValue({ layoutRefs: { insetRef: { current: insetEl }, mainRef: refs.main } })
 
-    it('calls handleClose when backdrop inside rootEl is clicked', () => {
-      const backdrop = createBackdrop(elements.root)
       render(<TestComponent />)
-      fireEvent.click(backdrop)
-      expect(handleClose).toHaveBeenCalled()
+
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toBe('60px auto auto 8px')
+      expect(document.documentElement.style.getPropertyValue(MODAL_MAX_HEIGHT)).toContain('px')
     })
 
-    it('does not call handleClose when backdrop outside rootEl is clicked', () => {
-      const backdrop = createBackdrop(document.body)
+    it('leaves --modal-inset unset when slot ref cannot be resolved', () => {
       render(<TestComponent />)
-      fireEvent.click(backdrop)
-      expect(handleClose).not.toHaveBeenCalled()
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toBe('')
     })
 
-    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()
+    it('updates --modal-inset and --modal-max-height via aria-controls when buttonContainerEl is stale', () => {
+      refs.panel.current.dataset.slot = buttonSlot
+
+      const button = document.createElement('button')
+      button.setAttribute(ARIA_CONTROLS, PANEL_ID)
+      elements.buttonContainer.appendChild(button)
+      document.body.appendChild(elements.buttonContainer)
+
+      const staleEl = document.createElement('div') // detached
+      render(<TestComponent buttonContainerEl={staleEl} />)
+
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toContain('10px')
+      expect(document.documentElement.style.getPropertyValue(MODAL_MAX_HEIGHT)).toContain('px')
     })
-  })
 
-  it('toggles inert elements on mount and cleanup', () => {
-    const { unmount } = render(<TestComponent />)
+    it('uses data-button-slot fallback when no aria-controls button and no buttonContainerEl', () => {
+      refs.panel.current.dataset.slot = buttonSlot
+      elements.buttonContainer.dataset.buttonSlot = buttonSlot
+      document.body.appendChild(elements.buttonContainer)
+
+      render(<TestComponent buttonContainerEl={undefined} />)
 
-    expect(toggleInertModule.toggleInertElements).toHaveBeenCalledWith({
-      containerEl: refs.panel.current,
-      isFullscreen: true,
-      boundaryEl: elements.root
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toContain('10px')
+      expect(document.documentElement.style.getPropertyValue(MODAL_MAX_HEIGHT)).toContain('px')
     })
 
-    unmount()
+    it('uses connected buttonContainerEl when panel has no ID', () => {
+      refs.panel.current.id = '' // falsy panelElId → currentButtonEl = null (line 152 false branch)
+      refs.panel.current.dataset.slot = buttonSlot
+      document.body.appendChild(elements.buttonContainer) // isConnected = true (line 154 true branch)
+
+      render(<TestComponent buttonContainerEl={elements.buttonContainer} />)
+
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toContain('10px')
+    })
 
-    expect(toggleInertModule.toggleInertElements).toHaveBeenCalledWith({
-      containerEl: refs.panel.current,
-      isFullscreen: false,
-      boundaryEl: elements.root
+    it('skips update when effectiveContainer cannot be resolved', () => {
+      refs.panel.current.dataset.slot = buttonSlot
+      render(<TestComponent buttonContainerEl={null} />)
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toBe('')
+    })
+
+    it('anchors to bottom when button is in a bottom sub-slot', () => {
+      refs.panel.current.dataset.slot = buttonSlot
+      const button = document.createElement('button')
+      button.setAttribute(ARIA_CONTROLS, PANEL_ID)
+      elements.buttonContainer.appendChild(button)
+      const bottomSlot = document.createElement('div')
+      bottomSlot.className = 'im-o-app__right-bottom'
+      bottomSlot.appendChild(elements.buttonContainer)
+      document.body.appendChild(bottomSlot)
+
+      render(<TestComponent />)
+
+      // Bottom slot: insetTop='auto', insetBottom = mainRect.bottom - buttonRect.bottom = 50 - 40 = 10px
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toMatch(/^auto/)
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toContain('10px')
+    })
+
+    it('uses left inset when button is in a left sub-slot', () => {
+      refs.panel.current.dataset.slot = buttonSlot
+      const button = document.createElement('button')
+      button.setAttribute(ARIA_CONTROLS, PANEL_ID)
+      elements.buttonContainer.appendChild(button)
+      const leftSlot = document.createElement('div')
+      leftSlot.className = 'im-o-app__left-top'
+      leftSlot.appendChild(elements.buttonContainer)
+      document.body.appendChild(leftSlot)
+
+      render(<TestComponent />)
+
+      // Left slot: insetTop = buttonRect.top - mainRect.top = 10, insetLeft = buttonRect.right - mainRect.left + dividerGap = 80 + 8 = 88
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toBe('10px auto auto 88px')
     })
   })
 
@@ -138,6 +230,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 +255,49 @@ 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)
+
+      render(<TestComponent />)
+      fireEvent.click(backdrop)
+      expect(handleClose).toHaveBeenCalled()
+    })
+
+    it('does not close when backdrop is outside rootEl', () => {
+      const externalBackdrop = document.createElement('div')
+      externalBackdrop.className = 'im-o-app__modal-backdrop'
+      document.body.appendChild(externalBackdrop)
 
-      refs.panel.current = null
-      dispatchFocusIn(document.body)
+      render(<TestComponent />)
+      fireEvent.click(externalBackdrop)
+      expect(handleClose).not.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])
+}