@defra/interactive-map 0.0.6-alpha → 0.0.7-alpha

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

@@ -91,8 +91,8 @@ describe('PopupMenu', () => {
     Object.defineProperty(ev, 'target', { value: target, enumerable: true })
     document.dispatchEvent(ev)
   }
-  const expectSelected = (text) => expect(screen.getByText(text).parentElement).toHaveClass('fm-c-popup-menu__item--selected')
-  const expectNotSelected = (text) => expect(screen.getByText(text).parentElement).not.toHaveClass('fm-c-popup-menu__item--selected')
+  const expectSelected = (text) => expect(screen.getByText(text).parentElement).toHaveClass('im-c-popup-menu__item--selected')
+  const expectNotSelected = (text) => expect(screen.getByText(text).parentElement).not.toHaveClass('im-c-popup-menu__item--selected')
 
   it('renders items with labels and icons', () => {
     renderMenu()
@@ -104,7 +104,7 @@ describe('PopupMenu', () => {
   it('applies selected class to active index', () => {
     renderMenu({ startIndex: 1 })
     expect(screen.getByText('Item 2').parentElement).toHaveClass(
-      'fm-c-popup-menu__item--selected'
+      'im-c-popup-menu__item--selected'
     )
   })
 
@@ -112,15 +112,15 @@ describe('PopupMenu', () => {
     renderMenu()
     const ul = screen.getByRole('menu')
     fireEvent.keyDown(ul, { key: 'ArrowDown' })
-    expect(screen.getByText('Item 2').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 2').parentElement).toHaveClass('im-c-popup-menu__item--selected')
     fireEvent.keyDown(ul, { key: 'ArrowDown' })
-    expect(screen.getByText('Item 1').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 1').parentElement).toHaveClass('im-c-popup-menu__item--selected')
     fireEvent.keyDown(ul, { key: 'ArrowUp' })
-    expect(screen.getByText('Item 2').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 2').parentElement).toHaveClass('im-c-popup-menu__item--selected')
     fireEvent.keyDown(ul, { key: 'Home' })
-    expect(screen.getByText('Item 1').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 1').parentElement).toHaveClass('im-c-popup-menu__item--selected')
     fireEvent.keyDown(ul, { key: 'End' })
-    expect(screen.getByText('Item 2').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 2').parentElement).toHaveClass('im-c-popup-menu__item--selected')
   })
 
   it('handles Enter key to call onClick and close menu', () => {
@@ -159,6 +159,32 @@ describe('PopupMenu', () => {
     expect(mockSetIsOpen).toHaveBeenCalled()
   })
 
+  it('does not call onClick or close menu when clicking a disabled item', () => {
+    mockUseApp.disabledButtons = new Set(['item1'])
+    renderMenu()
+    fireEvent.click(screen.getByText('Item 1'))
+    expect(items[0].onClick).not.toHaveBeenCalled()
+    expect(mockSetIsOpen).not.toHaveBeenCalled()
+  })
+
+  it('Enter calls buttonConfig.onClick with evaluateProp context', () => {
+    const mockOnClick = jest.fn()
+    mockUseApp.buttonConfig = { item1: { onClick: mockOnClick } }
+    renderMenu({ startIndex: 0 })
+    fireEvent.keyDown(screen.getByRole('menu'), { key: 'Enter' })
+    expect(mockOnClick).toHaveBeenCalled()
+    expect(mockEvaluateProp).toHaveBeenCalled()
+    expect(mockSetIsOpen).toHaveBeenCalled()
+  })
+
+  it('Enter on a disabled item closes menu but does not call onClick', () => {
+    mockUseApp.disabledButtons = new Set(['item1'])
+    renderMenu({ startIndex: 0 })
+    fireEvent.keyDown(screen.getByRole('menu'), { key: 'Enter' })
+    expect(items[0].onClick).not.toHaveBeenCalled()
+    expect(mockSetIsOpen).toHaveBeenCalled()
+  })
+
   it('does nothing if click is inside menu', () => {
     renderMenu()
     const element = document.createElement('div')
@@ -215,22 +241,22 @@ describe('PopupMenu', () => {
     renderMenu({ startIndex: -1 })
     const ul = screen.getByRole('menu')
     fireEvent.keyDown(ul, { key: 'ArrowDown' })
-    expect(screen.getByText('Item 1').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 1').parentElement).toHaveClass('im-c-popup-menu__item--selected')
     fireEvent.keyDown(ul, { key: 'ArrowUp' })
-    expect(screen.getByText('Item 2').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 2').parentElement).toHaveClass('im-c-popup-menu__item--selected')
   })
 
   it('ArrowUp from no selection picks last visible', () => {
     renderMenu({ startIndex: -1 })
     const ul = screen.getByRole('menu')
     fireEvent.keyDown(ul, { key: 'ArrowUp' })
-    expect(screen.getByText('Item 2').parentElement).toHaveClass('fm-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 2').parentElement).toHaveClass('im-c-popup-menu__item--selected')
   })
 
   it('initializes with no selection when neither startIndex nor startPos provided', () => {
     renderMenu({ startIndex: undefined, startPos: undefined })
-    expect(screen.getByText('Item 1').parentElement).not.toHaveClass('fm-c-popup-menu__item--selected')
-    expect(screen.getByText('Item 2').parentElement).not.toHaveClass('fm-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 1').parentElement).not.toHaveClass('im-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 2').parentElement).not.toHaveClass('im-c-popup-menu__item--selected')
   })
 
   it('does nothing when navigating and no visible items', () => {
@@ -238,8 +264,8 @@ describe('PopupMenu', () => {
     renderMenu({ startIndex: -1 })
     const ul = screen.getByRole('menu')
     fireEvent.keyDown(ul, { key: 'ArrowDown' })
-    expect(screen.getByText('Item 1').parentElement).not.toHaveClass('fm-c-popup-menu__item--selected')
-    expect(screen.getByText('Item 2').parentElement).not.toHaveClass('fm-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 1').parentElement).not.toHaveClass('im-c-popup-menu__item--selected')
+    expect(screen.getByText('Item 2').parentElement).not.toHaveClass('im-c-popup-menu__item--selected')
   })
 
   it('Enter with no selection closes but does not call any item onClick', () => {
@@ -291,7 +317,7 @@ describe('PopupMenu', () => {
     const item1 = screen.getByText('Item 1').parentElement
     const item2 = screen.getByText('Item 2').parentElement
     expect(item1).toHaveStyle('display: none')
-    expect(item2).toHaveAttribute('aria-pressed', 'true')
+    expect(item2).toHaveAttribute('aria-checked', 'true')
   })
 
   it('ignores unrelated keys (covers Enter false branch)', () => {
@@ -301,4 +327,64 @@ describe('PopupMenu', () => {
     expect(items[1].onClick).not.toHaveBeenCalled()
     expect(mockSetIsOpen).not.toHaveBeenCalled()
   })
+
+  it('activateItem does nothing when item has no onClick and no buttonConfig.onClick (line 123 false branch)', () => {
+    const noHandlerItems = [{ id: 'noHandler', label: 'No Handler' }]
+    render(
+      <PopupMenu
+        pluginId='plugin1'
+        instigatorId='instigator'
+        startIndex={0}
+        menuRef={menuRef}
+        items={noHandlerItems}
+        setIsOpen={mockSetIsOpen}
+      />
+    )
+    fireEvent.keyDown(screen.getByRole('menu'), { key: 'Enter' })
+    expect(mockSetIsOpen).toHaveBeenCalledWith(false)
+  })
+
+  it('activateItem skips synthetic click when element is not found in DOM (line 132 false branch)', () => {
+    const getByIdSpy = jest.spyOn(document, 'getElementById').mockReturnValue(null)
+    renderMenu({ startIndex: 0 })
+    fireEvent.keyDown(screen.getByRole('menu'), { key: 'Enter' })
+    expect(mockSetIsOpen).toHaveBeenCalledWith(false)
+    getByIdSpy.mockRestore()
+  })
+
+  describe('Space key', () => {
+    it('Space on a menuitem calls onClick and closes menu', () => {
+      renderMenu({ startIndex: 0 })
+      const ul = screen.getByRole('menu')
+      fireEvent.keyDown(ul, { key: ' ' })
+      expect(items[0].onClick).toHaveBeenCalled()
+      expect(mockSetIsOpen).toHaveBeenCalledWith(false)
+    })
+
+    it('Space on a menuitemcheckbox calls onClick but does not close menu', () => {
+      renderMenu({ startIndex: 1 })
+      const ul = screen.getByRole('menu')
+      fireEvent.keyDown(ul, { key: ' ' })
+      expect(items[1].onClick).toHaveBeenCalled()
+      expect(mockSetIsOpen).not.toHaveBeenCalled()
+    })
+
+    it('Space on a disabled item does nothing', () => {
+      mockUseApp.disabledButtons = new Set(['item1'])
+      renderMenu({ startIndex: 0 })
+      const ul = screen.getByRole('menu')
+      fireEvent.keyDown(ul, { key: ' ' })
+      expect(items[0].onClick).not.toHaveBeenCalled()
+      expect(mockSetIsOpen).not.toHaveBeenCalled()
+    })
+
+    it('Space with no selection does nothing', () => {
+      renderMenu({ startIndex: -1 })
+      const ul = screen.getByRole('menu')
+      fireEvent.keyDown(ul, { key: ' ' })
+      expect(items[0].onClick).not.toHaveBeenCalled()
+      expect(items[1].onClick).not.toHaveBeenCalled()
+      expect(mockSetIsOpen).not.toHaveBeenCalled()
+    })
+  })
 })

package/src/App/hooks/useButtonStateEvaluator.js

@@ -1,5 +1,5 @@
 // src/core/hooks/useButtonStateEvaluator.js
-import { useEffect, useContext } from 'react'
+import { useLayoutEffect, useContext } from 'react'
 import { useApp } from '../store/appContext.js'
 import { useConfig } from '../store/configContext.js'
 import { PluginContext } from '../store/PluginProvider.jsx'
@@ -55,7 +55,7 @@ export function useButtonStateEvaluator (evaluateProp) {
   const { pluginRegistry } = useConfig()
   const pluginContext = useContext(PluginContext)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!appState?.dispatch || !pluginContext) {
       return
     }

package/src/App/hooks/useInterfaceAPI.js

@@ -1,5 +1,5 @@
 // src/hooks/usePanels.js
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { EVENTS as events } from '../../config/events.js'
 import { useApp } from '../store/appContext.js'
 import { useService } from '../store/serviceContext.js'
@@ -8,38 +8,45 @@ export const useInterfaceAPI = () => {
   const { dispatch, hiddenButtons, disabledButtons, pressedButtons, expandedButtons } = useApp()
   const { eventBus } = useService()
 
+  // Refs so event handlers always use the latest dispatch/state without re-subscribing
+  const dispatchRef = useRef(dispatch)
+  const stateRef = useRef({ hiddenButtons, disabledButtons, pressedButtons, expandedButtons })
+  dispatchRef.current = dispatch
+  stateRef.current = { hiddenButtons, disabledButtons, pressedButtons, expandedButtons }
+
   useEffect(() => {
     const handleAddButton = ({ id, config }) => {
       // Add the button
-      dispatch({ type: 'ADD_BUTTON', payload: { id, config } })
-      // Add all optional menu items as individual buttons
+      dispatchRef.current({ type: 'ADD_BUTTON', payload: { id, config } })
+      // Add all optional menu items as individual buttons (isMenuItem prevents slot rendering)
       if (Array.isArray(config.menuItems)) {
         config.menuItems.forEach(item => {
-          dispatch({ type: 'ADD_BUTTON', payload: { id: item.id, config: item } })
+          dispatchRef.current({ type: 'ADD_BUTTON', payload: { id: item.id, config: { ...item, isMenuItem: true } } })
         })
       }
     }
 
     const handleToggleButtonState = ({ id, prop, value }) => {
+      const { hiddenButtons: hidden, disabledButtons: disabled, pressedButtons: pressed, expandedButtons: expanded } = stateRef.current
       switch (prop) {
         case 'hidden': {
-          const isHidden = typeof value === 'boolean' ? value : !hiddenButtons.has(id)
-          dispatch({ type: 'TOGGLE_BUTTON_HIDDEN', payload: { id, isHidden } })
+          const isHidden = typeof value === 'boolean' ? value : !hidden.has(id)
+          dispatchRef.current({ type: 'TOGGLE_BUTTON_HIDDEN', payload: { id, isHidden } })
           break
         }
         case 'disabled': {
-          const isDisabled = typeof value === 'boolean' ? value : !disabledButtons.has(id)
-          dispatch({ type: 'TOGGLE_BUTTON_DISABLED', payload: { id, isDisabled } })
+          const isDisabled = typeof value === 'boolean' ? value : !disabled.has(id)
+          dispatchRef.current({ type: 'TOGGLE_BUTTON_DISABLED', payload: { id, isDisabled } })
           break
         }
         case 'pressed': {
-          const isPressed = typeof value === 'boolean' ? value : !pressedButtons.has(id)
-          dispatch({ type: 'TOGGLE_BUTTON_PRESSED', payload: { id, isPressed } })
+          const isPressed = typeof value === 'boolean' ? value : !pressed.has(id)
+          dispatchRef.current({ type: 'TOGGLE_BUTTON_PRESSED', payload: { id, isPressed } })
           break
         }
         case 'expanded': {
-          const isExpanded = typeof value === 'boolean' ? value : !expandedButtons.has(id)
-          dispatch({ type: 'TOGGLE_BUTTON_EXPANDED', payload: { id, isExpanded } })
+          const isExpanded = typeof value === 'boolean' ? value : !expanded.has(id)
+          dispatchRef.current({ type: 'TOGGLE_BUTTON_EXPANDED', payload: { id, isExpanded } })
           break
         }
         default:
@@ -47,25 +54,11 @@ export const useInterfaceAPI = () => {
       }
     }
 
-    const handleAddPanel = ({ id, config }) => {
-      dispatch({ type: 'ADD_PANEL', payload: { id, config } })
-    }
-
-    const handleRemovePanel = (id) => {
-      dispatch({ type: 'REMOVE_PANEL', payload: id })
-    }
-
-    const handleShowPanel = (id) => {
-      dispatch({ type: 'OPEN_PANEL', payload: { panelId: id } })
-    }
-
-    const handleHidePanel = (id) => {
-      dispatch({ type: 'CLOSE_PANEL', payload: id })
-    }
-
-    const handleAddControl = ({ id, config }) => {
-      dispatch({ type: 'ADD_CONTROL', payload: { id, config } })
-    }
+    const handleAddPanel = ({ id, config }) => dispatchRef.current({ type: 'ADD_PANEL', payload: { id, config } })
+    const handleRemovePanel = (id) => dispatchRef.current({ type: 'REMOVE_PANEL', payload: id })
+    const handleShowPanel = (id) => dispatchRef.current({ type: 'OPEN_PANEL', payload: { panelId: id } })
+    const handleHidePanel = (id) => dispatchRef.current({ type: 'CLOSE_PANEL', payload: id })
+    const handleAddControl = ({ id, config }) => dispatchRef.current({ type: 'ADD_CONTROL', payload: { id, config } })
 
     eventBus.on(events.APP_ADD_BUTTON, handleAddButton)
     eventBus.on(events.APP_TOGGLE_BUTTON_STATE, handleToggleButtonState)
@@ -77,11 +70,12 @@ export const useInterfaceAPI = () => {
 
     return () => {
       eventBus.off(events.APP_ADD_BUTTON, handleAddButton)
+      eventBus.off(events.APP_TOGGLE_BUTTON_STATE, handleToggleButtonState)
       eventBus.off(events.APP_ADD_PANEL, handleAddPanel)
       eventBus.off(events.APP_REMOVE_PANEL, handleRemovePanel)
       eventBus.off(events.APP_SHOW_PANEL, handleShowPanel)
       eventBus.off(events.APP_HIDE_PANEL, handleHidePanel)
       eventBus.off(events.APP_ADD_CONTROL, handleAddControl)
     }
-  }, [dispatch, eventBus])
+  }, [eventBus])
 }

package/src/App/registry/pluginRegistry.js

@@ -19,9 +19,9 @@ export function createPluginRegistry ({ registerButton, registerPanel, registerC
     if (manifest.buttons) {
       asArray(manifest.buttons).forEach(button => {
         registerButton({ [button.id]: { ...pluginConfig, ...button } })
-        // Flat button registry including anu menu items
+        // Flat button registry including any menu items (isMenuItem prevents slot rendering)
         button?.menuItems?.forEach(menuItem => {
-          registerButton({ [menuItem.id]: { ...pluginConfig, ...menuItem } })
+          registerButton({ [menuItem.id]: { ...pluginConfig, ...menuItem, isMenuItem: true } })
         })
       })
     }

package/src/App/renderer/mapButtons.js

@@ -8,9 +8,14 @@ function getMatchingButtons ({ appState, buttonConfig, slot, evaluateProp }) {
     return []
   }
 
-  return Object.entries(buttonConfig).filter(([_, config]) => {
+  return Object.entries(buttonConfig).filter(([_, config]) => { // NOSONAR, extractig to a hleper wouldn't necessarily improve readability
     const bpConfig = config[breakpoint]
 
+    // Skip menu items — they render inside a parent button's popup, not in a slot
+    if (config.isMenuItem) {
+      return false
+    }
+
     // Dynamic exclusion
     if (typeof config.excludeWhen === 'function' && evaluateProp(config.excludeWhen, config.pluginId)) {
       return false

package/src/App/renderer/mapButtons.test.js

@@ -82,6 +82,16 @@ describe('mapButtons module', () => {
       const state = { ...appState, isFullscreen: false }
       expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState: state, evaluateProp }).length).toBe(1)
     })
+
+    it('filters out buttons with isMenuItem:true', () => {
+      const config = { b1: { ...baseBtn, isMenuItem: true } }
+      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState, evaluateProp }).length).toBe(0)
+    })
+
+    it('does not filter out buttons without isMenuItem', () => {
+      const config = { b1: baseBtn, b2: { ...baseBtn, isMenuItem: false } }
+      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState, evaluateProp }).length).toBe(2)
+    })
   })
 
   // -------------------------
@@ -203,5 +213,15 @@ describe('mapButtons module', () => {
       appState.buttonConfig = ({ b1: { ...baseBtn, desktop: { slot: 'header' } } })
       expect(map()[0].order).toBe(0)
     })
+
+    it('excludes menu items from slot rendering even when they have a matching slot', () => {
+      appState.buttonConfig = ({
+        parent: baseBtn,
+        child: { ...baseBtn, isMenuItem: true }
+      })
+      const result = map()
+      expect(result).toHaveLength(1)
+      expect(result[0].id).toBe('parent')
+    })
   })
 })

package/src/App/store/MapProvider.jsx

@@ -8,8 +8,8 @@ export const MapContext = createContext(null)
 export const MapProvider = ({ options, children }) => {
   const [state, dispatch] = useReducer(reducer, initialState(options))
 
-  const handleMapReady = () => {
-    dispatch({ type: 'SET_MAP_READY' })
+  const handleMapReady = (mapProvider) => {
+    dispatch({ type: 'SET_MAP_READY', payload: mapProvider })
   }
 
   const handleInitMapStyles = (mapStyles) => {

package/src/App/store/mapActionsMap.js

@@ -7,10 +7,11 @@ const mergePayload = (state, payload) => ({
   ...payload
 })
 
-const setMapReady = (state) => {
+const setMapReady = (state, mapProvider) => {
   return {
     ...state,
-    isMapReady: true
+    isMapReady: true,
+    mapProvider
   }
 }
 

package/src/App/store/mapReducer.js

@@ -19,6 +19,7 @@ export const initialState = (config) => {
 
   return {
     isMapReady: false,
+    mapProvider: null,
     mapStyle: pluginHandlesMapStyles ? null : mapStyle,
     mapSize,
     center,

package/src/scss/settings/_dimensions.scss

@@ -9,6 +9,7 @@
     --button-padding: 8px;
     --button-icon-label-offset: 7px;
     --label-button-padding: 10px;
+    --touch-button-size: 50px;
 
     // Borders and focus
     --app-border-width: 1px;

package/webpack.esm.mjs

@@ -86,15 +86,23 @@ const createESMConfig = (entryName, entryPath, outDir, isCore = false) => {
     },
     externals: isCore
       ? {}
-      : {
-          react: 'react',
-          'react-dom': 'react-dom',
-          'react/jsx-runtime': 'react/jsx-runtime',
-          preact: 'preact',
-          'preact/compat': 'preact/compat',
-          'preact/hooks': 'preact/hooks',
-          'preact/jsx-runtime': 'preact/jsx-runtime'
-        },
+      : [
+          {
+            react: 'react',
+            'react-dom': 'react-dom',
+            'react/jsx-runtime': 'react/jsx-runtime',
+            preact: 'preact',
+            'preact/compat': 'preact/compat',
+            'preact/hooks': 'preact/hooks',
+            'preact/jsx-runtime': 'preact/jsx-runtime'
+          },
+          ({ request }, callback) => {
+            if (request.startsWith('@arcgis/core')) {
+              return callback(null, `module ${request}`)
+            }
+            return callback()
+          }
+        ],
     module: {
       rules: [
         { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
@@ -119,7 +127,7 @@ const ALL_BUILDS = [
   // Providers
   { entryPath: './providers/maplibre/src/index.js', outDir: 'providers/maplibre/dist/esm' },
   { entryPath: './providers/beta/open-names/src/index.js', outDir: 'providers/beta/open-names/dist/esm' },
-  // { entryPath: './providers/beta/esri/src/index.js', outDir: 'providers/beta/esri/dist/esm' },
+  { entryPath: './providers/beta/esri/src/index.js', outDir: 'providers/beta/esri/dist/esm' },
 
   // Plugins
   { entryPath: './plugins/beta/scale-bar/src/index.js', outDir: 'plugins/beta/scale-bar/dist/esm' },
@@ -129,6 +137,7 @@ const ALL_BUILDS = [
   { entryPath: './plugins/beta/datasets/src/index.js', outDir: 'plugins/beta/datasets/dist/esm' },
   { entryPath: './plugins/beta/map-styles/src/index.js', outDir: 'plugins/beta/map-styles/dist/esm' },
   { entryPath: './plugins/beta/draw-ml/src/index.js', outDir: 'plugins/beta/draw-ml/dist/esm' },
+  { entryPath: './plugins/beta/draw-es/src/index.js', outDir: 'plugins/beta/draw-es/dist/esm' },
   { entryPath: './plugins/beta/frame/src/index.js', outDir: 'plugins/beta/frame/dist/esm' }
 ]