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

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

@@ -0,0 +1,331 @@
+import { renderHook } from '@testing-library/react'
+import { useVisibleGeometry, getGeometryType, getPointCoordinates } from './useVisibleGeometry'
+import { useConfig } from '../store/configContext.js'
+import { useApp } from '../store/appContext.js'
+
+jest.mock('../store/configContext.js')
+jest.mock('../store/appContext.js')
+
+const pointFeature = { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 51] }, properties: {} }
+const multiPointFeature = { type: 'Feature', geometry: { type: 'MultiPoint', coordinates: [[1, 51], [2, 52]] }, properties: {} }
+const polygonFeature = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
+
+const insetPanelRect = { left: 600, top: 0, right: 1000, bottom: 800, width: 400, height: 800 }
+const bottomPanelRect = { left: 0, top: 500, right: 1000, bottom: 800, width: 1000, height: 300 }
+
+const setup = (overrides = {}) => {
+  const capturedHandlers = {}
+  const mapProvider = {
+    isGeometryObscured: jest.fn(() => true),
+    fitToBounds: jest.fn(),
+    setView: jest.fn(),
+    ...overrides.mapProvider
+  }
+  const eventBus = {
+    on: jest.fn((event, handler) => { capturedHandlers[event] = handler }),
+    off: jest.fn(),
+    ...overrides.eventBus
+  }
+
+  const insetEl = document.createElement('div')
+  insetEl.getBoundingClientRect = jest.fn(() => insetPanelRect)
+  const bottomEl = document.createElement('div')
+  bottomEl.getBoundingClientRect = jest.fn(() => bottomPanelRect)
+
+  const layoutRefs = {
+    mainRef: { current: document.createElement('div') },
+    insetRef: { current: insetEl },
+    bottomRef: { current: bottomEl },
+    ...overrides.layoutRefs
+  }
+  const panelConfig = {
+    myPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'inset' } },
+    emptyPanel: {},
+    ...overrides.panelConfig
+  }
+  const panelRegistry = {
+    getPanelConfig: jest.fn(() => panelConfig),
+    ...overrides.panelRegistry
+  }
+
+  useConfig.mockReturnValue({ mapProvider, eventBus, ...overrides.config })
+  useApp.mockReturnValue({ layoutRefs, panelConfig, panelRegistry, breakpoint: 'desktop', ...overrides.app })
+
+  return { mapProvider, eventBus, capturedHandlers, layoutRefs, panelConfig, insetEl, bottomEl }
+}
+
+describe('useVisibleGeometry', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.useFakeTimers()
+  })
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  test('early returns when mapProvider is null', () => {
+    setup({ config: { mapProvider: null } })
+    const { result } = renderHook(() => useVisibleGeometry())
+    expect(result.error).toBeUndefined()
+  })
+
+  test('early returns when eventBus is null', () => {
+    setup({ config: { eventBus: null } })
+    const { result } = renderHook(() => useVisibleGeometry())
+    expect(result.error).toBeUndefined()
+  })
+
+  test('subscribes to APP_PANEL_OPENED on eventBus', () => {
+    const { eventBus } = setup()
+    renderHook(() => useVisibleGeometry())
+    expect(eventBus.on).toHaveBeenCalledWith('app:panelopened', expect.any(Function))
+  })
+
+  test('unsubscribes from APP_PANEL_OPENED on unmount', () => {
+    const { eventBus } = setup()
+    const { unmount } = renderHook(() => useVisibleGeometry())
+    unmount()
+    expect(eventBus.off).toHaveBeenCalledWith('app:panelopened', expect.any(Function))
+  })
+
+  test('does nothing when panel has no visibleGeometry', () => {
+    const { mapProvider, capturedHandlers } = setup()
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'emptyPanel' })
+    expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when panel does not exist in config', () => {
+    const { mapProvider, capturedHandlers } = setup()
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'unknownPanel' })
+    expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when panel has visibleGeometry but no slot config', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { noSlotPanel: { visibleGeometry: polygonFeature } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'noSlotPanel' })
+    expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when mapProvider has no isGeometryObscured method', () => {
+    const { capturedHandlers, mapProvider } = setup({ mapProvider: { isGeometryObscured: null, fitToBounds: jest.fn(), setView: jest.fn() } })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when slot ref has zero dimensions (panel not visible)', () => {
+    const zeroEl = document.createElement('div')
+    zeroEl.getBoundingClientRect = jest.fn(() => ({ left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 }))
+    const { mapProvider, capturedHandlers } = setup({
+      layoutRefs: {
+        mainRef: { current: document.createElement('div') },
+        insetRef: { current: zeroEl }
+      }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+
+    // Run the current pending animation frame
+    jest.runOnlyPendingTimers()
+
+    expect(mapProvider.isGeometryObscured).not.toHaveBeenCalled()
+  })
+
+  test('does nothing when geometry is not obscured', () => {
+    const { mapProvider, capturedHandlers } = setup({ mapProvider: { isGeometryObscured: jest.fn(() => false), fitToBounds: jest.fn(), setView: jest.fn() } })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+    expect(mapProvider.setView).not.toHaveBeenCalled()
+  })
+
+  test('calls fitToBounds with visibleGeometry for non-point geometry when obscured', () => {
+    const { mapProvider, capturedHandlers } = setup()
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+    jest.runAllTimers()
+
+    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, insetPanelRect)
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
+    expect(mapProvider.setView).not.toHaveBeenCalled()
+  })
+
+  test('calls setView with center for Point geometry when obscured', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { pointPanel: { visibleGeometry: pointFeature, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'pointPanel' })
+    jest.runAllTimers()
+
+    expect(mapProvider.setView).toHaveBeenCalledWith({ center: [1, 51] })
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('calls setView with first coordinate for MultiPoint geometry when obscured', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { mpPanel: { visibleGeometry: multiPointFeature, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'mpPanel' })
+    jest.runAllTimers()
+
+    expect(mapProvider.setView).toHaveBeenCalledWith({ center: [1, 51] })
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('calls fitToBounds for a raw non-Feature geometry (e.g. Polygon) when obscured', () => {
+    const rawPolygon = { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { geoPanel: { visibleGeometry: rawPolygon, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'geoPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(rawPolygon)
+    expect(mapProvider.setView).not.toHaveBeenCalled()
+  })
+
+  test('calls setView for a raw Point geometry (not Feature-wrapped) when obscured', () => {
+    const rawPoint = { type: 'Point', coordinates: [1, 51] }
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { rawPointPanel: { visibleGeometry: rawPoint, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'rawPointPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.setView).toHaveBeenCalledWith({ center: [1, 51] })
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('does not call setView when Point feature has null coordinates', () => {
+    const nullCoordsFeature = { type: 'Feature', geometry: { type: 'Point', coordinates: null }, properties: {} }
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { nullPanel: { visibleGeometry: nullCoordsFeature, desktop: { slot: 'inset' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'nullPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.setView).not.toHaveBeenCalled()
+    expect(mapProvider.fitToBounds).not.toHaveBeenCalled()
+  })
+
+  test('uses bottom slot ref when panel is in bottom slot', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: { bottomPanel: { visibleGeometry: polygonFeature, desktop: { slot: 'bottom' } } }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'bottomPanel' })
+    jest.runAllTimers()
+
+    expect(mapProvider.isGeometryObscured).toHaveBeenCalledWith(polygonFeature, bottomPanelRect)
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
+  })
+
+  test('uses latest panelConfig via ref when it changes between renders', () => {
+    const { mapProvider, capturedHandlers, insetEl } = setup()
+    const { rerender } = renderHook(() => useVisibleGeometry())
+
+    const updatedGeometry = { type: 'Feature', geometry: { type: 'LineString', coordinates: [[0, 0], [1, 1]] }, properties: {} }
+    const updatedPanelConfig = { myPanel: { visibleGeometry: updatedGeometry, desktop: { slot: 'inset' } } }
+    useApp.mockReturnValue({
+      layoutRefs: { mainRef: { current: document.createElement('div') }, insetRef: { current: insetEl } },
+      panelConfig: updatedPanelConfig,
+      panelRegistry: { getPanelConfig: jest.fn(() => updatedPanelConfig) },
+      breakpoint: 'desktop'
+    })
+    rerender()
+
+    capturedHandlers['app:panelopened']({ panelId: 'myPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(updatedGeometry)
+  })
+
+  test('uses slot from event payload when registry config lacks slot info', () => {
+    const freshGeometry = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
+    const { mapProvider, capturedHandlers } = setup({
+      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry } })) }
+    })
+    renderHook(() => useVisibleGeometry())
+    // Event includes slot (as middleware provides for ADD_PANEL); registry config has no slot info
+    capturedHandlers['app:panelopened']({ panelId: 'freshPanel', slot: 'inset' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(freshGeometry)
+  })
+
+  test('falls back to panelRegistry for panels not yet in stale panelConfig', () => {
+    const freshGeometry = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]] }, properties: {} }
+    const { mapProvider, capturedHandlers } = setup({
+      panelRegistry: { getPanelConfig: jest.fn(() => ({ freshPanel: { visibleGeometry: freshGeometry, desktop: { slot: 'inset' } } })) }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'freshPanel' })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(freshGeometry)
+  })
+
+  test('falls back to config when panel not in panelConfig and registry returns null', () => {
+    const { mapProvider, capturedHandlers } = setup({
+      panelConfig: {}, // panel not present
+      panelRegistry: { getPanelConfig: jest.fn(() => null) } // registry returns null
+    })
+
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'missingPanel', visibleGeometry: polygonFeature, slot: 'inset' })
+    jest.runAllTimers()
+    // Should still call fitToBounds using visibleGeometry from event payload
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
+  })
+
+  test('uses visibleGeometry from event payload directly, bypassing registry (ADD_PANEL first-click case)', () => {
+    // Registry is empty — simulates first ADD_PANEL before React has processed the reducer
+    const { mapProvider, capturedHandlers } = setup({
+      panelRegistry: { getPanelConfig: jest.fn(() => ({})) }
+    })
+    renderHook(() => useVisibleGeometry())
+    capturedHandlers['app:panelopened']({ panelId: 'newPanel', slot: 'inset', visibleGeometry: polygonFeature })
+    jest.runAllTimers()
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(polygonFeature)
+  })
+})
+
+describe('getGeometryType', () => {
+  test('returns null for falsy input', () => {
+    expect(getGeometryType(null)).toBeNull()
+    expect(getGeometryType(undefined)).toBeNull()
+  })
+
+  test('returns geometry type for a Feature', () => {
+    expect(getGeometryType({ type: 'Feature', geometry: { type: 'Polygon' } })).toBe('Polygon')
+  })
+
+  test('returns type directly for a raw geometry', () => {
+    expect(getGeometryType({ type: 'Point' })).toBe('Point')
+    expect(getGeometryType({ type: 'FeatureCollection' })).toBe('FeatureCollection')
+  })
+})
+
+describe('getPointCoordinates', () => {
+  test('returns null for unrecognised geometry type', () => {
+    expect(getPointCoordinates({ type: 'Polygon', coordinates: [] })).toBeNull()
+    expect(getPointCoordinates({ type: 'LineString', coordinates: [] })).toBeNull()
+  })
+
+  test('returns coordinates for a Point', () => {
+    expect(getPointCoordinates(pointFeature.geometry)).toEqual(pointFeature.geometry.coordinates)
+  })
+
+  test('returns first coordinate for a MultiPoint', () => {
+    expect(getPointCoordinates(multiPointFeature.geometry)).toEqual(multiPointFeature.geometry.coordinates[0])
+  })
+
+  test('recurses into Feature geometry', () => {
+    expect(getPointCoordinates(pointFeature)).toEqual(pointFeature.geometry.coordinates)
+  })
+})

package/src/App/layout/Layout.jsx

@@ -70,7 +70,7 @@ export const Layout = () => {
             <div className='im-o-app__right-top'>
               <SlotRenderer slot={layoutSlots.RIGHT_TOP} />
             </div>
-            <div className='im-o-app__right-bottom'>
+            <div className='im-o-app__right-bottom' ref={layoutRefs.rightBottomRef}>
               <SlotRenderer slot={layoutSlots.RIGHT_BOTTOM} />
             </div>
           </div>
@@ -94,13 +94,13 @@ export const Layout = () => {
           <div className='im-o-app__actions' ref={layoutRefs.actionsRef}>
             <SlotRenderer slot={layoutSlots.ACTIONS} />
           </div>
+          <div className='im-o-app__modal' ref={layoutRefs.modalRef}>
+            <SlotRenderer slot={layoutSlots.MODAL} />
+            <div className='im-o-app__modal-backdrop' />
+          </div>
         </div>
       </div>
       <HtmlElementHost />
-      <div className='im-o-app__modal' ref={layoutRefs.modalRef}>
-        <SlotRenderer slot={layoutSlots.MODAL} />
-        <div className='im-o-app__modal-backdrop' />
-      </div>
     </div>
   )
 }

package/src/App/layout/layout.module.scss

@@ -261,6 +261,7 @@
   display: flex;
   position: absolute;
   top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   z-index: 99;
@@ -321,10 +322,7 @@
   }
 
   [class*="im-c-panel--"][class*="-button"] { // Adjacent to button
-    top: var(--modal-inset);
-    right: var(--modal-inset);
-    bottom: var(--modal-inset);
-    left: var(--modal-inset);
+    inset: var(--modal-inset);
   }
 }
 

package/src/App/registry/panelRegistry.js

@@ -4,16 +4,7 @@ import { deepMerge } from '../../utils/deepMerge.js'
 
 // Pure utility functions for panel registry operations
 export const registerPanel = (currentConfig, panel) => {
-  const normalizedPanelConfig = Object.fromEntries(
-    Object.entries(panel).map(([key, value]) => [
-      key,
-      {
-        showLabel: true,
-        ...value
-      }
-    ])
-  )
-  return { ...currentConfig, ...normalizedPanelConfig }
+  return { ...currentConfig, ...panel }
 }
 
 export const addPanel = (currentConfig, id, config) => {

package/src/App/registry/panelRegistry.test.js

@@ -2,31 +2,28 @@ import { createPanelRegistry, registerPanel, addPanel, removePanel, getPanelConf
 import { defaultPanelConfig } from '../../config/appConfig.js'
 
 describe('panelRegistry', () => {
-  test('registerPanel should store a panel with showLabel default', () => {
+  test('registerPanel should store a panel', () => {
     const panel = { settings: { title: 'Settings Panel' } }
     const config = registerPanel({}, panel)
     expect(config).toEqual({
       settings: {
-        title: 'Settings Panel',
-        showLabel: true
+        title: 'Settings Panel'
       }
     })
   })
 
   test('registerPanel should merge multiple panels', () => {
     const panel1 = { settings: { title: 'Settings Panel' } }
-    const panel2 = { dashboard: { title: 'Dashboard Panel', showLabel: false } }
+    const panel2 = { dashboard: { title: 'Dashboard Panel' } }
     let config = {}
     config = registerPanel(config, panel1)
     config = registerPanel(config, panel2)
     expect(config).toEqual({
       settings: {
-        title: 'Settings Panel',
-        showLabel: true
+        title: 'Settings Panel'
       },
       dashboard: {
-        title: 'Dashboard Panel',
-        showLabel: false
+        title: 'Dashboard Panel'
       }
     })
   })
@@ -37,8 +34,7 @@ describe('panelRegistry', () => {
     const result = getPanelConfig(config)
     expect(result).toEqual({
       reports: {
-        title: 'Reports Panel',
-        showLabel: true
+        title: 'Reports Panel'
       }
     })
   })
@@ -100,7 +96,6 @@ describe('panelRegistry', () => {
       // Test registerPanel state
       registry.registerPanel({ p1: { title: 'P1' } })
       expect(registry.getPanelConfig()).toHaveProperty('p1')
-      expect(registry.getPanelConfig().p1.showLabel).toBe(true)
 
       // Test addPanel state and return value
       const added = registry.addPanel('p2', { title: 'P2' })

package/src/App/renderer/HtmlElementHost.jsx

@@ -1,5 +1,5 @@
 // src/App/renderer/HtmlElementHost.jsx
-import React, { useRef, useEffect, useMemo } from 'react'
+import React, { useRef, useLayoutEffect, useMemo } from 'react'
 import { useApp } from '../store/appContext.js'
 import { Panel } from '../components/Panel/Panel.jsx'
 import { resolveTargetSlot, isModeAllowed, isControlVisible, isConsumerHtml } from './slotHelpers.js'
@@ -18,6 +18,7 @@ export const getSlotRef = (slot, layoutRefs) => {
     inset: layoutRefs.insetRef,
     middle: layoutRefs.middleRef,
     bottom: layoutRefs.bottomRef,
+    'right-bottom': layoutRefs.rightBottomRef,
     actions: layoutRefs.actionsRef,
     modal: layoutRefs.modalRef
   }
@@ -31,16 +32,24 @@ export const getSlotRef = (slot, layoutRefs) => {
  * (e.g. the banner slot swaps DOM nodes between mobile and desktop).
  */
 export const useDomProjection = (wrapperRef, targetSlot, isVisible, layoutRefs, breakpoint) => {
-  useEffect(() => {
+  useLayoutEffect(() => {
     const wrapper = wrapperRef.current
 
     if (isVisible) {
       const slotRef = getSlotRef(targetSlot, layoutRefs)
       if (slotRef?.current) {
-        slotRef.current.appendChild(wrapper)
+        const backdrop = slotRef.current.querySelector(':scope > .im-o-app__modal-backdrop')
+        if (backdrop) {
+          slotRef.current.insertBefore(wrapper, backdrop)
+        } else {
+          slotRef.current.appendChild(wrapper)
+        }
         wrapper.style.display = ''
       }
     } else {
+      if (wrapper.parentElement === layoutRefs.modalRef?.current) {
+        layoutRefs.appContainerRef?.current?.appendChild(wrapper)
+      }
       wrapper.style.display = 'none'
     }
 

package/src/App/renderer/HtmlElementHost.test.jsx

@@ -199,6 +199,95 @@ describe('HtmlElementHost', () => {
     expect(container.firstChild).toBeNull() // still renders safely
   })
 
+  it('inserts panel before backdrop when modal slot contains a backdrop element', () => {
+    const modalRef = React.createRef()
+    const appContainerRef = React.createRef()
+    const refs = { ...layoutRefs, modalRef, appContainerRef }
+
+    mockApp({
+      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Menu', desktop: { slot: 'side', modal: true } } },
+      openPanels: { p1: { props: {} } },
+      layoutRefs: refs
+    })
+
+    render(
+      <div>
+        <div ref={appContainerRef}>
+          <div ref={modalRef}>
+            <div className='im-o-app__modal-backdrop' />
+          </div>
+        </div>
+        <HtmlElementHost />
+      </div>
+    )
+
+    const children = Array.from(modalRef.current.children)
+    const panelIndex = children.findIndex(el => el.dataset.testid === 'panel-p1')
+    const backdropIndex = children.findIndex(el => el.classList.contains('im-o-app__modal-backdrop'))
+
+    expect(panelIndex).toBeGreaterThanOrEqual(0)
+    expect(panelIndex).toBeLessThan(backdropIndex)
+  })
+
+  it('moves panel from modal to appContainerRef when hidden', () => {
+    // Create refs
+    const modalRef = React.createRef()
+    const appContainerRef = React.createRef()
+    const refs = { ...layoutRefs, modalRef, appContainerRef }
+
+    // Panel config: modal slot
+    const panelConfig = {
+      p1: { html: '<p>Hi</p>', label: 'Menu', desktop: { slot: 'modal', modal: true } }
+    }
+
+    // App state: panel initially open
+    mockApp({
+      panelConfig,
+      openPanels: { p1: { props: {} } },
+      layoutRefs: refs
+    })
+
+    // Render a harness that includes both refs
+    const { rerender } = render(
+      <div>
+        <div ref={appContainerRef} />
+        <div ref={modalRef} />
+        <HtmlElementHost />
+      </div>
+    )
+
+    // Now it should actually be inside modalRef
+    const panelInModal = modalRef.current.querySelector('[data-testid="panel-p1"]')
+    expect(panelInModal).toBeTruthy()
+    expect(modalRef.current.contains(panelInModal)).toBe(true)
+
+    // Close the panel
+    useApp.mockReturnValue({
+      breakpoint: 'desktop',
+      mode: 'view',
+      isFullscreen: false,
+      panelConfig,
+      controlConfig: {},
+      openPanels: {}, // closed now
+      layoutRefs: refs,
+      dispatch: jest.fn()
+    })
+
+    rerender(
+      <div>
+        <div ref={appContainerRef} />
+        <div ref={modalRef} />
+        <HtmlElementHost />
+      </div>
+    )
+
+    // It should have moved to appContainerRef
+    const panelInApp = appContainerRef.current.querySelector('[data-testid="panel-p1"]')
+    expect(panelInApp).toBeTruthy()
+    expect(appContainerRef.current.contains(panelInApp)).toBe(true)
+    expect(modalRef.current.contains(panelInApp)).toBe(false)
+  })
+
   test('getSlotRef returns null for unknown slot', () => {
     expect(getSlotRef('unknown-slot', {})).toBeNull()
   })