@defra/interactive-map 0.0.39-alpha → 0.0.41-alpha

package/plugins/menu/src/components/Menu/Menu.test.jsx

@@ -0,0 +1,161 @@
+import { render } from '@testing-library/react'
+import { Menu } from './Menu.jsx'
+
+let capturedOnChange = null
+
+jest.mock('./MenuCheckbox.jsx', () => ({
+  MenuCheckbox: ({ menuGroupItem, onChange }) => {
+    capturedOnChange = onChange
+    return (
+      <div
+        data-testid='layers-menu-checkbox'
+        data-item-id={menuGroupItem.id}
+      />
+    )
+  }
+}))
+
+jest.mock('./RadioGroupWrapper.jsx', () => ({
+  RadioGroupWrapper: ({ menuGroup }) => (
+    <div data-testid='layers-radio-group-wrapper' data-group-id={menuGroup.id} />
+  )
+}))
+
+jest.mock('./GroupLegend.jsx', () => ({
+  GroupLegend: ({ menuGroup, children }) => (
+    <div data-testid='layers-menu-group-wrapper' data-group-id={menuGroup.id}>
+      {children}
+    </div>
+  )
+}))
+
+const makePluginState = (menu = [], extra = {}) => ({
+  menu,
+  menuState: {},
+  dispatch: jest.fn(),
+  ...extra
+})
+
+const appConfig = {
+  id: 'map'
+}
+
+describe('Menu', () => {
+  describe('container class', () => {
+    it('renders the base container class when no groups have a groupLabel', () => {
+      const pluginState = makePluginState([{ id: 'g1', type: 'checkbox', items: [] }])
+      const { container } = render(<Menu pluginState={pluginState} appConfig={appConfig} />)
+      const div = container.firstChild
+      expect(div.className).toBe('im-c-menu')
+    })
+
+    it('adds the --has-groups modifier when at least one group has a groupLabel', () => {
+      const pluginState = makePluginState([{ id: 'g1', type: 'checkbox', groupLabel: 'My Group', items: [] }])
+      const { container } = render(<Menu pluginState={pluginState} />)
+      const div = container.firstChild
+      expect(div.className).toBe('im-c-menu im-c-menu--has-groups')
+    })
+  })
+
+  describe('empty menu', () => {
+    it('renders the container with no children when menu is empty', () => {
+      const pluginState = makePluginState([])
+      const { container } = render(<Menu pluginState={pluginState} />)
+      expect(container.firstChild.children).toHaveLength(0)
+    })
+
+    it('uses an empty array when menu is not provided', () => {
+      const { container } = render(<Menu pluginState={{}} />)
+      expect(container.firstChild.children).toHaveLength(0)
+    })
+  })
+
+  describe('checkbox groups', () => {
+    it('renders a GroupLegend for each checkbox group', () => {
+      const pluginState = makePluginState([
+        { id: 'g1', type: 'checkbox', items: [] },
+        { id: 'g2', type: 'checkbox', items: [] }
+      ])
+      const { getAllByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getAllByTestId('layers-menu-group-wrapper')).toHaveLength(2)
+    })
+
+    it('renders a MenuCheckbox for each item in a checkbox group', () => {
+      const pluginState = makePluginState([
+        { id: 'g1', type: 'checkbox', items: [{ id: 'item-a' }, { id: 'item-b' }] }
+      ])
+      const { getAllByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getAllByTestId('layers-menu-checkbox')).toHaveLength(2)
+    })
+
+    it('passes the correct group to GroupLegend', () => {
+      const group = { id: 'group-x', type: 'checkbox', items: [] }
+      const pluginState = makePluginState([group])
+      const { getByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getByTestId('layers-menu-group-wrapper').dataset.groupId).toBe('group-x')
+    })
+
+    it('passes the correct item to MenuCheckbox', () => {
+      const pluginState = makePluginState([
+        { id: 'g1', type: 'checkbox', items: [{ id: 'item-1' }] }
+      ])
+      const { getByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getByTestId('layers-menu-checkbox').dataset.itemId).toBe('item-1')
+    })
+  })
+
+  describe('radio groups', () => {
+    it('renders a RadioGroupWrapper for non-checkbox groups', () => {
+      const pluginState = makePluginState([
+        { id: 'r1', type: 'radio', items: [{ id: 'opt1' }, { id: 'opt2' }] }
+      ])
+      const { getAllByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getAllByTestId('layers-radio-group-wrapper')).toHaveLength(1)
+    })
+
+    it('passes the correct group to RadioGroupWrapper', () => {
+      const pluginState = makePluginState([
+        { id: 'radio-group-1', type: 'radio', items: [] }
+      ])
+      const { getByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getByTestId('layers-radio-group-wrapper').dataset.groupId).toBe('radio-group-1')
+    })
+
+    it('does not render a GroupLegend for radio groups', () => {
+      const pluginState = makePluginState([{ id: 'r1', type: 'radio', items: [] }])
+      const { queryByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(queryByTestId('layers-menu-group-wrapper')).toBeNull()
+    })
+  })
+
+  describe('mixed groups', () => {
+    it('renders both checkbox and radio wrappers when both types are present', () => {
+      const pluginState = makePluginState([
+        { id: 'c1', type: 'checkbox', items: [] },
+        { id: 'r1', type: 'radio', items: [] }
+      ])
+      const { getByTestId } = render(<Menu pluginState={pluginState} />)
+      expect(getByTestId('layers-menu-group-wrapper')).toBeTruthy()
+      expect(getByTestId('layers-radio-group-wrapper')).toBeTruthy()
+    })
+  })
+
+  describe('handleDatasetChange', () => {
+    it('passes handleOnChange from the config item as onChange', () => {
+      const handleOnChange = jest.fn()
+      const pluginState = makePluginState([
+        { id: 'g1', type: 'checkbox', items: [{ id: 'dataset-abc', handleOnChange }] }
+      ])
+      render(<Menu pluginState={pluginState} />)
+      expect(capturedOnChange).toBe(handleOnChange)
+    })
+
+    it('onChange is undefined when the config item has no handleOnChange', () => {
+      const pluginState = makePluginState([
+        { id: 'g1', type: 'checkbox', items: [{ id: 'dataset-abc' }] }
+      ])
+      render(<Menu pluginState={pluginState} />)
+      expect(capturedOnChange).toBeUndefined()
+    })
+  })
+})

package/plugins/menu/src/components/Menu/MenuCheckbox.jsx

@@ -0,0 +1,35 @@
+import { useIdPrefix } from './useIdPrefix.jsx'
+
+export const MenuCheckbox = ({ dispatch, menuGroupItem, onChange, checked }) => {
+  const itemClass = `im-c-menu__item govuk-checkboxes govuk-checkboxes--small${checked ? '' : ' im-c-menu__item--checked'}`
+  const itemId = useIdPrefix(`checkbox-${menuGroupItem.id}`)
+
+  const handleOnChange = event => {
+    const _checked = Boolean(event.target?.checked)
+    if (onChange) {
+      // The menu config can optionally pass handleOnChange, which is passed in as onChange
+      // and called here
+      onChange(_checked)
+    }
+    // Also update the menu state, so any visibleWhen implementations can also handle it
+    dispatch({ type: 'UPDATE_MENU_STATE', payload: { [menuGroupItem.id]: _checked } })
+  }
+
+  return (
+    <div key={itemId} className={itemClass} data-module='govuk-checkboxes'>
+      <div className='govuk-checkboxes__item'>
+        <input
+          className='govuk-checkboxes__input'
+          id={itemId}
+          name={itemId}
+          type='checkbox'
+          checked={checked}
+          onChange={handleOnChange}
+        />
+        <label className='im-c-menu__item-label govuk-label govuk-checkboxes__label' htmlFor={itemId}>
+          {menuGroupItem.label}
+        </label>
+      </div>
+    </div>
+  )
+}

package/plugins/menu/src/components/Menu/MenuCheckbox.test.jsx

@@ -0,0 +1,93 @@
+import { render, screen, act } from '@testing-library/react'
+import { MenuCheckbox } from './MenuCheckbox.jsx'
+
+const onChange = jest.fn()
+const dispatch = jest.fn()
+const menuGroupItem = { id: 'dataset-1', label: 'Dataset One' }
+
+beforeEach(() => {
+  onChange.mockReset()
+  dispatch.mockReset()
+})
+
+const renderCheckbox = (props = {}) =>
+  render(<MenuCheckbox menuGroupItem={menuGroupItem} onChange={onChange} dispatch={dispatch} checked {...props} />)
+
+describe('MenuCheckbox', () => {
+  describe('rendered output', () => {
+    it('renders a checkbox input', () => {
+      const { container } = renderCheckbox()
+      expect(container.querySelector('input[type="checkbox"]')).toBeTruthy()
+    })
+
+    it('renders the menuGroupItem label', () => {
+      renderCheckbox()
+      expect(screen.getByText('Dataset One')).toBeTruthy()
+    })
+
+    it('associates the label with the input via htmlFor', () => {
+      const { container } = renderCheckbox()
+      const label = container.querySelector('label')
+      const input = container.querySelector('input')
+      expect(label.htmlFor).toBe(input.id)
+    })
+  })
+
+  describe('checked state', () => {
+    it('is checked when checked prop is true', () => {
+      const { container } = renderCheckbox({ checked: true })
+      expect(container.querySelector('input').checked).toBe(true)
+    })
+
+    it('is unchecked when checked prop is false', () => {
+      const { container } = renderCheckbox({ checked: false })
+      expect(container.querySelector('input').checked).toBe(false)
+    })
+  })
+
+  describe('item class', () => {
+    it('does not include the --checked modifier when checked is true', () => {
+      const { container } = renderCheckbox({ checked: true })
+      expect(container.firstChild.className).not.toContain('im-c-menu__item--checked')
+    })
+
+    it('includes the --checked modifier when checked is false', () => {
+      const { container } = renderCheckbox({ checked: false })
+      expect(container.firstChild.className).toContain('im-c-menu__item--checked')
+    })
+  })
+
+  describe('handleOnChange', () => {
+    const triggerChange = (container, checked) => {
+      const input = container.querySelector('input')
+      const propsKey = Object.keys(input).find(k => k.startsWith('__reactProps'))
+      act(() => { input[propsKey].onChange({ target: { checked, value: input.value } }) })
+    }
+
+    it('calls onChange with true when the checkbox is checked', () => {
+      const { container } = renderCheckbox()
+      triggerChange(container, true)
+      expect(onChange).toHaveBeenCalledWith(true)
+    })
+
+    it('calls onChange with false when the checkbox is unchecked', () => {
+      const { container } = renderCheckbox()
+      triggerChange(container, false)
+      expect(onChange).toHaveBeenCalledWith(false)
+    })
+
+    it('dispatches UPDATE_MENU_STATE with the item id and checked value', () => {
+      const { container } = renderCheckbox()
+      triggerChange(container, true)
+      expect(dispatch).toHaveBeenCalledWith({
+        type: 'UPDATE_MENU_STATE',
+        payload: { 'dataset-1': true }
+      })
+    })
+
+    it('does not throw when onChange is not provided', () => {
+      const { container } = renderCheckbox({ onChange: undefined })
+      expect(() => triggerChange(container, true)).not.toThrow()
+    })
+  })
+})

package/plugins/menu/src/components/Menu/MenuGroup.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { RadioGroupWrapper } from './RadioGroupWrapper.jsx'
+import { CheckboxGroupWrapper } from './CheckboxGroupWrapper.jsx'
+
+export const MenuGroup = ({ menuGroup, dispatch, menuState }) => {
+  if (menuGroup.type === 'checkbox') {
+    return (<CheckboxGroupWrapper menuGroup={menuGroup} dispatch={dispatch} menuState={menuState} />)
+  } else {
+    return (<RadioGroupWrapper menuGroup={menuGroup} dispatch={dispatch} menuState={menuState} />)
+  }
+}

package/plugins/{datasets/src/components/LayersMenu/LayersMenuRadio.jsx → menu/src/components/Menu/MenuRadio.jsx}

@@ -1,7 +1,9 @@
 import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
+import { useIdPrefix } from './useIdPrefix.jsx'
 
-export const LayersMenuRadio = ({ menuGroupItem, name, checked, onChange }) => {
-  const itemClass = 'im-c-datasets-layers__item govuk-radios govuk-radios--small"'
+export const MenuRadio = ({ menuGroupItem, name, checked, onChange }) => {
+  const itemClass = 'im-c-menu__item govuk-radios govuk-radios--small"'
+  const itemId = useIdPrefix(`radio-${menuGroupItem.id}`)
   const { visibleWhen } = menuGroupItem
   const visible = visibleWhen ? isVisibleWhen(visibleWhen) : true
   if (!visible) {
@@ -11,7 +13,7 @@ export const LayersMenuRadio = ({ menuGroupItem, name, checked, onChange }) => {
     <div className={itemClass} data-module='govuk-radios'>
       <div className='govuk-radios__item'>
         <input
-          id={menuGroupItem.id}
+          id={itemId}
           className='govuk-radios__input'
           type='radio'
           name={name}
@@ -19,7 +21,7 @@ export const LayersMenuRadio = ({ menuGroupItem, name, checked, onChange }) => {
           checked={checked}
           onChange={onChange}
         />
-        <label className='im-c-datasets-layers__item-label govuk-label govuk-radios__label' htmlFor={menuGroupItem.id}>
+        <label className='im-c-menu__item-label govuk-label govuk-radios__label' htmlFor={itemId}>
           {menuGroupItem.label}
         </label>
       </div>

package/plugins/{datasets/src/components/LayersMenu/LayersMenuRadio.test.jsx → menu/src/components/Menu/MenuRadio.test.jsx}

@@ -1,43 +1,43 @@
 import { render, screen, act } from '@testing-library/react'
 import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
-import { LayersMenuRadio } from './LayersMenuRadio.jsx'
+import { MenuRadio } from './MenuRadio.jsx'
 
 jest.mock('../../registry/isVisibleWhen.js', () => ({
   isVisibleWhen: jest.fn()
 }))
 
 const onChange = jest.fn()
-const baseItem = { id: 'radio-1', label: 'Option One' }
+const baseItem = { id: 'option-1', label: 'Option One' }
 
 beforeEach(() => {
   isVisibleWhen.mockReturnValue(true)
   onChange.mockReset()
 })
 
-describe('LayersMenuRadio', () => {
+describe('MenuRadio', () => {
   describe('visibility', () => {
     it('renders when visibleWhen is not set', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
       )
       expect(container.querySelector('input[type="radio"]')).toBeTruthy()
     })
 
     it('does not call isVisibleWhen when visibleWhen is not set', () => {
-      render(<LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />)
+      render(<MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />)
       expect(isVisibleWhen).not.toHaveBeenCalled()
     })
 
     it('calls isVisibleWhen with the visibleWhen value', () => {
       const visibleWhen = { menu: ['someValue'] }
-      render(<LayersMenuRadio menuGroupItem={{ ...baseItem, visibleWhen }} name='group' checked={false} onChange={onChange} />)
+      render(<MenuRadio menuGroupItem={{ ...baseItem, visibleWhen }} name='group' checked={false} onChange={onChange} />)
       expect(isVisibleWhen).toHaveBeenCalledWith(visibleWhen)
     })
 
     it('returns null when isVisibleWhen resolves to false', () => {
       isVisibleWhen.mockReturnValue(false)
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={{ ...baseItem, visibleWhen: {} }} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={{ ...baseItem, visibleWhen: {} }} name='group' checked={false} onChange={onChange} />
       )
       expect(container.firstChild).toBeNull()
     })
@@ -45,7 +45,7 @@ describe('LayersMenuRadio', () => {
     it('renders when isVisibleWhen resolves to true', () => {
       isVisibleWhen.mockReturnValue(true)
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={{ ...baseItem, visibleWhen: {} }} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={{ ...baseItem, visibleWhen: {} }} name='group' checked={false} onChange={onChange} />
       )
       expect(container.querySelector('input[type="radio"]')).toBeTruthy()
     })
@@ -53,52 +53,52 @@ describe('LayersMenuRadio', () => {
 
   describe('rendered output', () => {
     it('renders the item label text', () => {
-      render(<LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />)
+      render(<MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />)
       expect(screen.getByText('Option One')).toBeTruthy()
     })
 
     it('sets the name attribute on the input', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='my-radio-group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='my-radio-group' checked={false} onChange={onChange} />
       )
       expect(container.querySelector('input').name).toBe('my-radio-group')
     })
 
     it('sets checked to true when checked prop is true', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='group' checked onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='group' checked onChange={onChange} />
       )
       expect(container.querySelector('input').checked).toBe(true)
     })
 
     it('sets checked to false when checked prop is false', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
       )
       expect(container.querySelector('input').checked).toBe(false)
     })
 
     it('sets the input value to the item id', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
       )
-      expect(container.querySelector('input').value).toBe('radio-1')
+      expect(container.querySelector('input').value).toBe('option-1')
     })
 
     it('associates the label with the input via htmlFor', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
       )
-      expect(container.querySelector('label').htmlFor).toBe('radio-1')
+      expect(container.querySelector('label').htmlFor).toBe('map-menu-radio-option-1')
     })
 
     it('calls onChange when the radio input changes', () => {
       const { container } = render(
-        <LayersMenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
+        <MenuRadio menuGroupItem={baseItem} name='group' checked={false} onChange={onChange} />
       )
       const input = container.querySelector('input')
       const propsKey = Object.keys(input).find(k => k.startsWith('__reactProps'))
-      act(() => { input[propsKey].onChange({ target: { value: 'radio-1' } }) })
+      act(() => { input[propsKey].onChange({ target: { value: 'option-1' } }) })
       expect(onChange).toHaveBeenCalledTimes(1)
     })
   })

package/plugins/menu/src/components/Menu/RadioGroupWrapper.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
+import { MenuRadio } from './MenuRadio.jsx'
+import { GroupLegend } from './GroupLegend.jsx'
+export const RadioGroupWrapper = ({ menuState, dispatch, menuGroup }) => {
+  const { id, items, visibleWhen } = menuGroup
+  const visible = visibleWhen ? isVisibleWhen(visibleWhen) : true
+  if (!visible) {
+    return null
+  }
+
+  const value = menuState[id]
+  const handleChange = (event) => {
+    dispatch({ type: 'UPDATE_MENU_STATE', payload: { [id]: event.target.value } })
+  }
+
+  return (
+    <GroupLegend menuGroup={menuGroup}>
+      <div className='govuk-radios govuk-radios--small' data-module='govuk-radios'>
+        {items.map((menuGroupItem) =>
+          <MenuRadio
+            key={menuGroupItem.id}
+            menuGroupItem={menuGroupItem}
+            name={id}
+            checked={menuGroupItem.id === value}
+            onChange={handleChange}
+          />
+        )}
+      </div>
+    </GroupLegend>
+  )
+}

package/plugins/{datasets/src/components/LayersMenu/LayersRadioGroupWrapper.test.jsx → menu/src/components/Menu/RadioGroupWrapper.test.jsx}

@@ -1,6 +1,6 @@
 import { render, screen, act } from '@testing-library/react'
 import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
-import { LayersRadioGroupWrapper } from './LayersRadioGroupWrapper.jsx'
+import { RadioGroupWrapper } from './RadioGroupWrapper.jsx'
 
 jest.mock('../../registry/isVisibleWhen.js', () => ({
   isVisibleWhen: jest.fn()
@@ -8,8 +8,8 @@ jest.mock('../../registry/isVisibleWhen.js', () => ({
 
 let capturedOnChange = null
 
-jest.mock('./LayersMenuRadio.jsx', () => ({
-  LayersMenuRadio: ({ menuGroupItem, checked, name, onChange }) => {
+jest.mock('./MenuRadio.jsx', () => ({
+  MenuRadio: ({ menuGroupItem, checked, name, onChange }) => {
     capturedOnChange = onChange
     return (
       <div
@@ -22,7 +22,7 @@ jest.mock('./LayersMenuRadio.jsx', () => ({
   }
 }))
 
-const makePluginState = (menuState = {}) => ({
+const makeProps = (menuState = {}) => ({
   menuState,
   dispatch: jest.fn()
 })
@@ -39,51 +39,51 @@ beforeEach(() => {
   capturedOnChange = null
 })
 
-describe('LayersRadioGroupWrapper', () => {
+describe('RadioGroupWrapper', () => {
   describe('visibility', () => {
     it('returns null when isVisibleWhen resolves to false', () => {
       isVisibleWhen.mockReturnValue(false)
       const { container } = render(
-        <LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={{ ...baseGroup, visibleWhen: {} }} />
+        <RadioGroupWrapper {...makeProps()} menuGroup={{ ...baseGroup, visibleWhen: {} }} />
       )
       expect(container.firstChild).toBeNull()
     })
 
     it('renders when visibleWhen is not set', () => {
       const { container } = render(
-        <LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={baseGroup} />
+        <RadioGroupWrapper {...makeProps()} menuGroup={baseGroup} />
       )
       expect(container.querySelector('.govuk-form-group')).toBeTruthy()
     })
 
     it('does not call isVisibleWhen when visibleWhen is not set', () => {
-      render(<LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={baseGroup} />)
+      render(<RadioGroupWrapper {...makeProps()} menuGroup={baseGroup} />)
       expect(isVisibleWhen).not.toHaveBeenCalled()
     })
 
     it('calls isVisibleWhen with the visibleWhen value', () => {
       const visibleWhen = { menu: ['someValue'] }
-      render(<LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={{ ...baseGroup, visibleWhen }} />)
+      render(<RadioGroupWrapper {...makeProps()} menuGroup={{ ...baseGroup, visibleWhen }} />)
       expect(isVisibleWhen).toHaveBeenCalledWith(visibleWhen)
     })
   })
 
   describe('rendered output', () => {
     it('renders the group label as the legend', () => {
-      render(<LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={baseGroup} />)
+      render(<RadioGroupWrapper {...makeProps()} menuGroup={baseGroup} />)
       expect(screen.getByText('My Group')).toBeTruthy()
     })
 
-    it('renders a LayersMenuRadio for each item', () => {
+    it('renders a MenuRadio for each item', () => {
       const { getAllByTestId } = render(
-        <LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={baseGroup} />
+        <RadioGroupWrapper {...makeProps()} menuGroup={baseGroup} />
       )
       expect(getAllByTestId('layers-menu-radio')).toHaveLength(2)
     })
 
     it('passes the group id as the name to each radio item', () => {
       const { getAllByTestId } = render(
-        <LayersRadioGroupWrapper pluginState={makePluginState()} menuGroup={baseGroup} />
+        <RadioGroupWrapper {...makeProps()} menuGroup={baseGroup} />
       )
       getAllByTestId('layers-menu-radio').forEach(radio => {
         expect(radio.dataset.name).toBe('group-1')
@@ -94,7 +94,7 @@ describe('LayersRadioGroupWrapper', () => {
   describe('checked state', () => {
     it('marks the item matching menuState as checked', () => {
       const { getAllByTestId } = render(
-        <LayersRadioGroupWrapper pluginState={makePluginState({ 'group-1': 'opt-a' })} menuGroup={baseGroup} />
+        <RadioGroupWrapper {...makeProps({ 'group-1': 'opt-a' })} menuGroup={baseGroup} />
       )
       const radios = getAllByTestId('layers-menu-radio')
       expect(radios[0].dataset.checked).toBe('true')
@@ -103,7 +103,7 @@ describe('LayersRadioGroupWrapper', () => {
 
     it('marks no item as checked when menuState has no value for the group', () => {
       const { getAllByTestId } = render(
-        <LayersRadioGroupWrapper pluginState={makePluginState({})} menuGroup={baseGroup} />
+        <RadioGroupWrapper {...makeProps({})} menuGroup={baseGroup} />
       )
       getAllByTestId('layers-menu-radio').forEach(radio => {
         expect(radio.dataset.checked).toBe('false')
@@ -113,10 +113,10 @@ describe('LayersRadioGroupWrapper', () => {
 
   describe('handleChange', () => {
     it('dispatches UPDATE_MENU_STATE with the selected item id', () => {
-      const pluginState = makePluginState({ 'group-1': 'opt-a' })
-      render(<LayersRadioGroupWrapper pluginState={pluginState} menuGroup={baseGroup} />)
+      const props = makeProps({ 'group-1': 'opt-a' })
+      render(<RadioGroupWrapper {...props} menuGroup={baseGroup} />)
       act(() => { capturedOnChange({ target: { value: 'opt-b' } }) })
-      expect(pluginState.dispatch).toHaveBeenCalledWith({
+      expect(props.dispatch).toHaveBeenCalledWith({
         type: 'UPDATE_MENU_STATE',
         payload: { 'group-1': 'opt-b' }
       })
@@ -124,10 +124,10 @@ describe('LayersRadioGroupWrapper', () => {
 
     it('dispatches using the group id as the payload key', () => {
       const group = { ...baseGroup, id: 'another-group' }
-      const pluginState = makePluginState({ 'another-group': 'opt-a' })
-      render(<LayersRadioGroupWrapper pluginState={pluginState} menuGroup={group} />)
+      const props = makeProps({ 'another-group': 'opt-a' })
+      render(<RadioGroupWrapper {...props} menuGroup={group} />)
       act(() => { capturedOnChange({ target: { value: 'opt-b' } }) })
-      expect(pluginState.dispatch).toHaveBeenCalledWith({
+      expect(props.dispatch).toHaveBeenCalledWith({
         type: 'UPDATE_MENU_STATE',
         payload: { 'another-group': 'opt-b' }
       })

package/plugins/menu/src/components/Menu/useIdPrefix.jsx

@@ -0,0 +1,4 @@
+import { createContext, useContext } from 'react'
+
+export const IdPrefixContext = createContext('map-menu')
+export const useIdPrefix = (suffix) => `${useContext(IdPrefixContext)}-${suffix}`

package/plugins/menu/src/index.js

@@ -0,0 +1,13 @@
+import './menu.scss'
+
+export default function createPlugin (options = {}) {
+  return {
+    noKeyItemText: 'No features displayed',
+    ...options,
+    id: 'menu',
+    load: async () => {
+      const module = (await import(/* webpackChunkName: "im-menu-plugin" */ './manifest.js')).manifest
+      return module
+    }
+  }
+}