@defra/interactive-map 0.0.43-fmp-experimental → 0.0.44-alpha

package/plugins/map-key/src/components/Key/KeySvg.jsx

@@ -4,16 +4,18 @@ import { KeySvgLine } from './KeySvgLine.jsx'
 import { KeySvgRect } from './KeySvgRect.jsx'
 import { KeySvgRamp } from './KeySvgRamp.jsx'
 import { symbolRegistry } from '../../registry/index.js'
+import { HORIZONTAL_RAMP } from '../../utils/groupStyles.js'
 
 // Pure derivation of keyDefinition — computed directly during render (see KeyItem.jsx for why:
 // staging this through useState/useEffect meant every fresh mount painted a blank symbol first).
-const getSymbolShape = (keyDefinition) => {
+
+const getSymbolShape = (keyDefinition, groupStyle) => {
   if (!keyDefinition) {
     return { symbolShape: null, symbolDef: null }
   }
-  const { hasSymbol, hasPattern, hasRampStyleKey, style } = keyDefinition
-  if (hasRampStyleKey) {
-    return { symbolShape: 'ramp', symbolDef: null }
+  const { hasSymbol, hasPattern, style } = keyDefinition
+  if (groupStyle === HORIZONTAL_RAMP) {
+    return { symbolShape: HORIZONTAL_RAMP, symbolDef: null }
   }
   if (hasSymbol) {
     const symbolDef = symbolRegistry.getSymbolDef(style)
@@ -28,8 +30,8 @@ const getSymbolShape = (keyDefinition) => {
   return { symbolShape: 'rect', symbolDef: null }
 }
 
-export const KeySvg = ({ keyDefinition, mapStyle }) => {
-  const { symbolShape, symbolDef } = getSymbolShape(keyDefinition)
+export const KeySvg = ({ keyDefinition, groupStyle, mapStyle }) => {
+  const { symbolShape, symbolDef } = getSymbolShape(keyDefinition, groupStyle)
 
   if (!symbolShape) {
     return null
@@ -39,7 +41,7 @@ export const KeySvg = ({ keyDefinition, mapStyle }) => {
     return <KeySvgPattern mapStyle={mapStyle} keyDefinition={keyDefinition} />
   } else if (symbolShape === 'line') {
     return <KeySvgLine mapStyle={mapStyle} keyDefinition={keyDefinition} />
-  } else if (symbolShape === 'ramp') {
+  } else if (symbolShape === HORIZONTAL_RAMP) {
     return <KeySvgRamp mapStyle={mapStyle} keyDefinition={keyDefinition} />
   } else {
     return <KeySvgRect mapStyle={mapStyle} keyDefinition={keyDefinition} />

package/plugins/map-key/src/components/Key/KeySvg.test.jsx

@@ -22,7 +22,7 @@ jest.mock('./KeySvgRect.jsx', () => ({
 }))
 
 jest.mock('./KeySvgRamp.jsx', () => ({
-  KeySvgRamp: () => <svg data-testid='key-svg-ramp' />
+  KeySvgRamp: () => <svg data-testid='key-svg-horizontal-ramp' />
 }))
 
 const baseKeyDefinition = {
@@ -91,8 +91,8 @@ describe('KeySvg', () => {
     expect(container.firstChild).toBeNull()
   })
 
-  it('renders KeySvgRamp when hasRampStyleKey is true', () => {
-    const { getByTestId } = render(<KeySvg {...baseProps} keyDefinition={{ ...baseKeyDefinition, hasRampStyleKey: true }} />)
-    expect(getByTestId('key-svg-ramp')).toBeTruthy()
+  it('renders KeySvgRamp when groupStyle is horizontal-ramp', () => {
+    const { getByTestId } = render(<KeySvg {...baseProps} keyDefinition={{ ...baseKeyDefinition }} groupStyle='horizontal-ramp' />)
+    expect(getByTestId('key-svg-horizontal-ramp')).toBeTruthy()
   })
 })

package/plugins/map-key/src/components/Key/MapKey.jsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react'
 import { getDatasetRegistry } from '../../registry/index.js'
-
+import { mergeKeyGroupItems } from '../../utils/mergeKeyGroupItems.js'
 import { Key } from './Key.jsx'
 
 export function MapKey ({
   mapState: { mapStyle },
-  pluginConfig: { noKeyItemText },
+  pluginConfig: { noKeyItemText, groups },
   services: { eventBus }
 }) {
   const [datasetRegistry, setDatasetRegistry] = useState(getDatasetRegistry())
@@ -17,7 +17,9 @@ export function MapKey ({
 
   const getKeyItems = () => {
     const { items, hasGroups: _hasGroups } = datasetRegistry.keyItems()
-    setKeyGroups(items)
+    // Post Process the items - based on the map-key pluginConfig adding any groupConfigs
+    const groupItems = mergeKeyGroupItems(groups, items)
+    setKeyGroups(groupItems)
     setHasGroups(_hasGroups)
   }
 

package/plugins/map-key/src/manifest.js

@@ -18,7 +18,7 @@ export const manifest = {
     panelId: 'mapKey',
     label: 'Key',
     iconId: 'key',
-    mobile: { slot: 'top-left', showLabel: false },
+    mobile: { slot: 'top-left', showLabel: true },
     tablet: { slot: 'top-left', showLabel: true },
     desktop: { slot: 'top-left', showLabel: true }
   }],

package/plugins/map-key/src/utils/groupStyles.js

@@ -0,0 +1,7 @@
+export const HORIZONTAL_RAMP = 'horizontal-ramp'
+
+const groupStyles = {
+  HORIZONTAL_RAMP
+}
+
+export default groupStyles

package/plugins/map-key/src/utils/mergeKeyGroupItems.js

@@ -0,0 +1,12 @@
+export const mergeKeyGroupItems = (groups, items) => {
+  if (!groups) {
+    return items
+  }
+  return items.map((item) => {
+    const { id } = item
+    if (groups[id]) {
+      return { ...item, ...groups[id] }
+    }
+    return item
+  })
+}

package/plugins/map-key/src/utils/mergeKeyGroupItems.test.js

@@ -0,0 +1,53 @@
+import { mergeKeyGroupItems } from './mergeKeyGroupItems'
+
+describe('mergeKeyGroupItems', () => {
+  it('returns items unchanged when groups is not provided', () => {
+    const items = [{ id: 'a', label: 'A' }, { id: 'b', label: 'B' }]
+
+    expect(mergeKeyGroupItems(undefined, items)).toBe(items)
+  })
+
+  it('returns items unchanged when groups is null', () => {
+    const items = [{ id: 'a', label: 'A' }]
+
+    expect(mergeKeyGroupItems(null, items)).toBe(items)
+  })
+
+  it('merges matching group data into an item', () => {
+    const items = [{ id: 'a', label: 'A' }]
+    const groups = { a: { group: 'Group 1' } }
+
+    expect(mergeKeyGroupItems(groups, items)).toEqual([
+      { id: 'a', label: 'A', group: 'Group 1' }
+    ])
+  })
+
+  it('overrides item properties with matching group properties', () => {
+    const items = [{ id: 'a', label: 'A' }]
+    const groups = { a: { label: 'Overridden' } }
+
+    expect(mergeKeyGroupItems(groups, items)).toEqual([
+      { id: 'a', label: 'Overridden' }
+    ])
+  })
+
+  it('leaves items without a matching group unchanged', () => {
+    const items = [{ id: 'a', label: 'A' }, { id: 'b', label: 'B' }]
+    const groups = { a: { group: 'Group 1' } }
+
+    expect(mergeKeyGroupItems(groups, items)).toEqual([
+      { id: 'a', label: 'A', group: 'Group 1' },
+      { id: 'b', label: 'B' }
+    ])
+  })
+
+  it('returns an empty array when items is empty', () => {
+    expect(mergeKeyGroupItems({ a: { group: 'Group 1' } }, [])).toEqual([])
+  })
+
+  it('handles an empty groups object as no matches', () => {
+    const items = [{ id: 'a', label: 'A' }]
+
+    expect(mergeKeyGroupItems({}, items)).toEqual(items)
+  })
+})

package/plugins/menu/dist/css/index.css

@@ -1,80 +1 @@
-.im-c-menu--has-groups > *:not(:first-child) {
-  border-top: 1px solid var(--button-hover-color);
-}
-
-.im-c-menu > *:first-child {
-  padding-top: 5px;
-}
-
-.im-c-menu > *:last-child {
-  margin-bottom: -5px;
-}
-
-.im-c-menu-group:not(:last-child) {
-  padding-bottom: 5px;
-}
-
-.im-c-menu__item {
-  padding-bottom: 5px;
-}
-.im-c-menu__item:first-child {
-  padding-top: 0;
-}
-.im-c-menu--has-groups > .im-c-menu__item:not(:first-child) {
-  padding-top: 5px;
-}
-.im-c-menu-group .im-c-menu__item {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.im-c-menu-group .im-c-menu__item:not(:last-child) {
-  margin-bottom: 0;
-}
-.im-c-menu__item .im-c-menu__item-label {
-  width: 100%;
-  max-width: none;
-  align-items: start;
-  padding-top: 12px;
-  padding-bottom: 10px;
-  align-self: auto;
-  font-size: 1rem;
-  line-height: 1.2;
-  color: var(--foreground-color);
-}
-
-.im-c-menu__item .govuk-checkboxes__item,
-.im-c-menu__item .govuk-radios__item {
-  flex-wrap: nowrap;
-}
-.im-c-menu__item .govuk-checkboxes__item .govuk-checkboxes__input, .im-c-menu__item .govuk-checkboxes__item .govuk-radios__input,
-.im-c-menu__item .govuk-radios__item .govuk-checkboxes__input,
-.im-c-menu__item .govuk-radios__item .govuk-radios__input {
-  margin-left: -3px;
-}
-
-.im-c-menu-group__fieldset {
-  border: none;
-  padding: 0;
-  margin: 0;
-  min-width: 0;
-}
-
-.im-c-menu-group__legend {
-  padding-top: 15px;
-  padding-bottom: 10px;
-  padding-inline: 0;
-  font-size: 1rem;
-  font-weight: bold;
-  color: var(--foreground-color);
-}
-.im-c-menu-group__legend h3 {
-  font-size: inherit;
-}
-
-.im-c-menu-group:first-child .im-c-menu-group__legend {
-  padding-top: 0;
-}
-
-.im-c-menu .govuk-checkboxes__input[aria-disabled=true] + .govuk-checkboxes__label {
-  opacity: 0.5;
-}
+.im-c-menu--has-groups>:not(:first-child){border-top:1px solid var(--button-hover-color)}.im-c-menu>:first-child{padding-top:5px}.im-c-menu>:last-child{margin-bottom:-5px}.im-c-menu-group:not(:last-child),.im-c-menu__item{padding-bottom:5px}.im-c-menu__item:first-child{padding-top:0}.im-c-menu--has-groups>.im-c-menu__item:not(:first-child){padding-top:5px}.im-c-menu-group .im-c-menu__item{padding-bottom:0;padding-top:0}.im-c-menu-group .im-c-menu__item:not(:last-child){margin-bottom:0}.im-c-menu__item .im-c-menu__item-label{align-items:start;align-self:auto;color:var(--foreground-color);font-size:1rem;line-height:1.2;max-width:none;padding-bottom:10px;padding-top:12px;width:100%}.im-c-menu__item .govuk-checkboxes__item,.im-c-menu__item .govuk-radios__item{flex-wrap:nowrap}.im-c-menu__item .govuk-checkboxes__item .govuk-checkboxes__input,.im-c-menu__item .govuk-checkboxes__item .govuk-radios__input,.im-c-menu__item .govuk-radios__item .govuk-checkboxes__input,.im-c-menu__item .govuk-radios__item .govuk-radios__input{margin-left:-3px}.im-c-menu-group__fieldset{border:none;margin:0;min-width:0;padding:0}.im-c-menu-group__legend{color:var(--foreground-color);font-size:1rem;font-weight:700;padding-bottom:10px;padding-top:15px;padding-inline:0}.im-c-menu-group__legend h3{font-size:inherit}.im-c-menu-group:first-child .im-c-menu-group__legend{padding-top:0}.im-c-menu .govuk-checkboxes__input[aria-disabled=true]+.govuk-checkboxes__label{opacity:.5}

package/plugins/menu/dist/esm/im-menu-plugin.js

@@ -1 +1 @@
-import{createContext as e,useContext as t,useRef as a,useEffect as n}from"preact/compat";import{jsx as r,jsxs as i,Fragment as u}from"preact/jsx-runtime";import o from"@babel/runtime/helpers/defineProperty";var l={},c=e=>{var t,a=(null===(t=l)||void 0===t||null===(t=t.current)||void 0===t?void 0:t.menuState)||{};for(var[n,r]of Object.entries(e)){var i=a[n];if(!r.includes(i))return!1}return!0},m=e=>{if(null==e)return!0;if("boolean"==typeof e)return e;if("object"==typeof e){for(var[t,a]of Object.entries(e))if("menu"===t&&!c(a))return!1;return!0}return!0},s=e("map-menu"),d=e=>"".concat(t(s),"-").concat(e),p=e=>{var{menuGroupItem:t,name:a,checked:n,onChange:u}=e,o=d("radio-".concat(t.id)),{visibleWhen:l}=t;return!l||m(l)?r("div",{className:'im-c-menu__item govuk-radios govuk-radios--small"',"data-module":"govuk-radios",children:i("div",{className:"govuk-radios__item",children:[r("input",{id:o,className:"govuk-radios__input",type:"radio",name:a,value:t.id,checked:n,onChange:u}),r("label",{className:"im-c-menu__item-label govuk-label govuk-radios__label",htmlFor:o,children:t.label})]})}):null},h=e=>{var{menuGroup:t,children:a}=e,n=t.groupLabel||t.label;if(!n)return r(u,{children:a});return r("div",{className:"govuk-form-group im-c-menu-group",children:i("fieldset",{className:"im-c-menu-group__fieldset",children:[r("legend",{className:"im-c-menu-group__legend",children:i("h3",{children:[" ",n," "]})}),a]})},t.id)},v=e=>{var{menuState:t,dispatch:a,menuGroup:n}=e,{id:i,items:u,visibleWhen:o}=n;if(!(!o||m(o)))return null;var l=t[i],c=e=>{a({type:"UPDATE_MENU_STATE",payload:{[i]:e.target.value}})};return r(h,{menuGroup:n,children:r("div",{className:"govuk-radios govuk-radios--small","data-module":"govuk-radios",children:u.map(e=>r(p,{menuGroupItem:e,name:i,checked:e.id===l,onChange:c},e.id))})})},b=e=>{var{dispatch:t,menuGroupItem:a,onChange:n,checked:u}=e,o="im-c-menu__item govuk-checkboxes govuk-checkboxes--small".concat(u?"":" im-c-menu__item--checked"),l=d("checkbox-".concat(a.id));return r("div",{className:o,"data-module":"govuk-checkboxes",children:i("div",{className:"govuk-checkboxes__item",children:[r("input",{className:"govuk-checkboxes__input",id:l,name:l,type:"checkbox",checked:u,onChange:e=>{var r,i=Boolean(null===(r=e.target)||void 0===r?void 0:r.checked);n&&n(i),t({type:"UPDATE_MENU_STATE",payload:{[a.id]:i}})}}),r("label",{className:"im-c-menu__item-label govuk-label govuk-checkboxes__label",htmlFor:l,children:a.label})]})},l)},g=e=>{var{dispatch:t,menuGroup:a,menuState:n}=e;return i(h,{menuGroup:a,children:[" ",a.items.map(e=>r(b,{dispatch:t,menuGroupItem:e,checked:n[e.id],onChange:e.handleOnChange},e.id))]})},f=e=>{var{menuGroup:t,dispatch:a,menuState:n}=e;return"checkbox"===t.type?r(g,{menuGroup:t,dispatch:a,menuState:n}):r(v,{menuGroup:t,dispatch:a,menuState:n})},k=e=>{};function _(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),a.push.apply(a,n)}return a}function y(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?_(Object(a),!0).forEach(function(t){o(e,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):_(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}var S={InitComponent:function(e){var{pluginConfig:t,pluginState:r,mapState:i,services:u}=e,{dispatch:o}=r,{eventBus:c}=u,m=a(r);m.current=r,n(()=>{if(!i.isMapReady)return()=>{};(e=>{l=e})(m);var{menu:e}=t;return(e=>{var{menu:t,eventBus:a,dispatch:n,pluginStateRef:r}=e;return n({type:"SET_MENU",payload:{menu:t}}),a.requestOnce("datasets:registry",k),a.emitWhenRequested("menu:state",r)})({menu:e,eventBus:c,dispatch:o,pluginStateRef:m})},[i.isMapReady]),n(()=>c.emit("menu:changed",r.menuState),[r.menuState])},reducer:{initialState:{actionsArray:[],menu:[],menuState:{}},actions:{SET_MENU:(e,t)=>{var{menu:a}=t,n=(e=>{var t={};return e.forEach(e=>{var a;"radio"===e.type&&(t[e.id]=e.value||(null===(a=e.items)||void 0===a?void 0:a[0].value))}),t})(a);return y(y({},e),{},{menu:a,menuState:n})},UPDATE_MENU_STATE:(e,t)=>y(y({},e),{},{menuState:y(y({},e.menuState),t)})}},panels:[{id:"menu",label:"Layers",mobile:{slot:"drawer",modal:!0,dismissible:!0},tablet:{slot:"left-top",dismissible:!0,exclusive:!0,width:"260px"},desktop:{slot:"left-top",modal:!1,dismissible:!0,exclusive:!0,width:"280px"},render:e=>{var{pluginState:t,appConfig:a}=e,{menu:n=[],dispatch:u,menuState:o}=t,l=(null==a?void 0:a.id)||"map",c=n.some(e=>e.groupLabel),m="im-c-menu".concat(c?" im-c-menu--has-groups":"");return r(s,{value:"".concat(l,"-menu"),children:i("div",{className:m,children:[" ",n.map(e=>r(f,{menuGroup:e,dispatch:u,menuState:o},e.id))]})})}}],buttons:[{id:"menuButton",label:"Layers",panelId:"menu",iconId:"layersMenu",mobile:{slot:"top-left",showLabel:!0},tablet:{slot:"top-left",showLabel:!0},desktop:{slot:"top-left",showLabel:!0}}],icons:[{id:"layersMenu",svgContent:'<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>'}]};export{S as manifest};
+import{createContext as e,useContext as t,useState as a,useRef as r,useEffect as n}from"preact/compat";import{jsx as i,jsxs as o,Fragment as u}from"preact/jsx-runtime";import l from"@babel/runtime/helpers/defineProperty";var c={},m=e=>{var t,a=(null===(t=c)||void 0===t||null===(t=t.current)||void 0===t?void 0:t.menuState)||{};for(var[r,n]of Object.entries(e)){var i=a[r];if(!n.includes(i))return!1}return!0},s=e=>{if(null==e)return!0;if("boolean"==typeof e)return e;if("object"==typeof e){for(var[t,a]of Object.entries(e))if("menu"===t&&!m(a))return!1;return!0}return!0},d=e("map-menu"),p=e=>"".concat(t(d),"-").concat(e),h=e=>{var{menuGroupItem:t,name:a,checked:r,onChange:n}=e,u=p("radio-".concat(t.id)),{visibleWhen:l}=t;return!l||s(l)?i("div",{className:'im-c-menu__item govuk-radios govuk-radios--small"',"data-module":"govuk-radios",children:o("div",{className:"govuk-radios__item",children:[i("input",{id:u,className:"govuk-radios__input",type:"radio",name:a,value:t.id,checked:r,onChange:n}),i("label",{className:"im-c-menu__item-label govuk-label govuk-radios__label",htmlFor:u,children:t.label})]})}):null},v=e=>{var{menuGroup:t,children:a}=e,r=t.groupLabel||t.label;if(!r)return i(u,{children:a});return i("div",{className:"govuk-form-group im-c-menu-group",children:o("fieldset",{className:"im-c-menu-group__fieldset",children:[i("legend",{className:"im-c-menu-group__legend",children:o("h3",{children:[" ",r," "]})}),a]})},t.id)},b=e=>{var{menuState:t,dispatch:a,menuGroup:r}=e,{id:n,items:o,visibleWhen:u}=r;if(!(!u||s(u)))return null;var l=t[n],c=e=>{a({type:"UPDATE_MENU_STATE",payload:{[n]:e.target.value}})};return i(v,{menuGroup:r,children:i("div",{className:"govuk-radios govuk-radios--small","data-module":"govuk-radios",children:o.map(e=>i(h,{menuGroupItem:e,name:n,checked:e.id===l,onChange:c},e.id))})})},g=e=>{var{dispatch:t,menuGroupItem:a,onChange:r,checked:n}=e,u="im-c-menu__item govuk-checkboxes govuk-checkboxes--small".concat(n?"":" im-c-menu__item--checked"),l=p("checkbox-".concat(a.id));return i("div",{className:u,"data-module":"govuk-checkboxes",children:o("div",{className:"govuk-checkboxes__item",children:[i("input",{className:"govuk-checkboxes__input",id:l,name:l,type:"checkbox",checked:n,onChange:e=>{var n,i=Boolean(null===(n=e.target)||void 0===n?void 0:n.checked);r&&r(i),t({type:"UPDATE_MENU_STATE",payload:{[a.id]:i}})}}),i("label",{className:"im-c-menu__item-label govuk-label govuk-checkboxes__label",htmlFor:l,children:a.label})]})},l)},f=e=>{var{dispatch:t,menuGroup:a,menuState:r}=e;return o(v,{menuGroup:a,children:[" ",a.items.map(e=>i(g,{dispatch:t,menuGroupItem:e,checked:r[e.id],onChange:e.handleOnChange},e.id))]})},k=e=>{var{menuGroup:t,dispatch:a,menuState:r}=e;return"checkbox"===t.type?i(f,{menuGroup:t,dispatch:a,menuState:r}):i(b,{menuGroup:t,dispatch:a,menuState:r})},_=e=>{},y=e=>{var{menu:t,eventBus:a,dispatch:r,pluginStateRef:n}=e,i=(e=>{var t=new URL(window.location.href),{searchParams:a}=t,r={};return e.forEach(e=>{var t=a.get(e.id);if("radio"===e.type){var n;r[e.id]=t||e.value||(null===(n=e.items)||void 0===n?void 0:n[0].value)}else{var{items:i}=e;i.forEach(e=>{var{id:a,checked:n}=e,i=t?t.includes(a):n;r[a]=i})}}),r})(t);return r({type:"SET_MENU",payload:{menu:t,menuState:i}}),a.requestOnce("datasets:registry",_),a.emitWhenRequested("menu:state",n)};function S(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),a.push.apply(a,r)}return a}function O(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?S(Object(a),!0).forEach(function(t){l(e,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):S(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}var w={InitComponent:function(e){var{pluginConfig:t,pluginState:i,mapState:o,services:u}=e,{dispatch:l}=i,{eventBus:m}=u,[d,p]=a(!1),h=r(i);h.current=i,n(()=>{if(!o.isMapReady)return()=>{};(e=>{c=e})(h);var{menu:e}=t,a=y({menu:e,eventBus:m,dispatch:l,pluginStateRef:h});return p(!0),a},[o.isMapReady]),n(()=>{m.emit("menu:changed",i.menuState),d&&(e=>{var t=new URL(window.location.href),{searchParams:a}=t,{menu:r,menuState:n}=e;r.forEach(e=>{var{id:t,visibleWhen:r,type:i}=e;s(r)?"radio"===i?((e,t,a)=>{var{id:r}=e,n=t[r];a.set(r,n)})(e,n,a):((e,t,a)=>{var{id:r,items:n}=e,i=[];n.forEach(e=>{var{id:a}=e;t[a]&&i.push(a)}),i.length?a.set(r,i):a.delete(r)})(e,n,a):a.delete(t)}),t.search=decodeURIComponent(t.search),window.history.replaceState({},"",t.toString())})(i)},[i.menuState])},reducer:{initialState:{menu:[],menuState:{}},actions:{SET_MENU:(e,t)=>{var{menu:a,menuState:r}=t;return O(O({},e),{},{menu:a,menuState:r})},UPDATE_MENU_STATE:(e,t)=>O(O({},e),{},{menuState:O(O({},e.menuState),t)})}},panels:[{id:"menu",label:"Layers",mobile:{slot:"drawer",modal:!0,dismissible:!0},tablet:{slot:"left-top",dismissible:!0,exclusive:!0,width:"260px"},desktop:{slot:"left-top",modal:!1,dismissible:!0,exclusive:!0,width:"280px"},render:e=>{var{pluginState:t,appConfig:a}=e,{menu:r=[],dispatch:n,menuState:u}=t,l=(null==a?void 0:a.id)||"map",c=r.some(e=>e.groupLabel),m="im-c-menu".concat(c?" im-c-menu--has-groups":"");return i(d,{value:"".concat(l,"-menu"),children:o("div",{className:m,children:[" ",r.map(e=>i(k,{menuGroup:e,dispatch:n,menuState:u},e.id))]})})}}],buttons:[{id:"menuButton",label:"Layers",panelId:"menu",iconId:"layersMenu",mobile:{slot:"top-left",showLabel:!0},tablet:{slot:"top-left",showLabel:!0},desktop:{slot:"top-left",showLabel:!0}}],icons:[{id:"layersMenu",svgContent:'<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>'}]};export{w as manifest};

package/plugins/menu/dist/umd/im-menu-plugin.js

@@ -1 +1 @@
-"use strict";(this.webpackChunkdefra_DefraMap=this.webpackChunkdefra_DefraMap||[]).push([[217],{77(e,t,n){n.r(t),n.d(t,{manifest:()=>w});var r=n(738);function o(e){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o(e)}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,u,a=[],c=!0,l=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);c=!0);}catch(e){l=!0,o=e}finally{try{if(!c&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(l)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return u(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?u(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var a={},c=function(e){for(var t,n=(null===(t=a)||void 0===t||null===(t=t.current)||void 0===t?void 0:t.menuState)||{},r=0,o=Object.entries(e);r<o.length;r++){var u=i(o[r],2),c=u[0],l=u[1],s=n[c];if(!l.includes(s))return!1}return!0},l=function(e){if(null==e)return!0;if("boolean"==typeof e)return e;if("object"===o(e)){for(var t=0,n=Object.entries(e);t<n.length;t++){var r=i(n[t],2),u=r[0],a=r[1];if("menu"===u&&!c(a))return!1}return!0}return!0},s=(0,r.createContext)("map-menu"),m=function(e){return"".concat((0,r.useContext)(s),"-").concat(e)},f=n(287),p=function(e){var t=e.menuGroupItem,n=e.name,r=e.checked,o=e.onChange,i=m("radio-".concat(t.id)),u=t.visibleWhen;return!u||l(u)?(0,f.jsx)("div",{className:'im-c-menu__item govuk-radios govuk-radios--small"',"data-module":"govuk-radios",children:(0,f.jsxs)("div",{className:"govuk-radios__item",children:[(0,f.jsx)("input",{id:i,className:"govuk-radios__input",type:"radio",name:n,value:t.id,checked:r,onChange:o}),(0,f.jsx)("label",{className:"im-c-menu__item-label govuk-label govuk-radios__label",htmlFor:i,children:t.label})]})}):null},d=function(e){var t=e.menuGroup,n=e.children,r=t.groupLabel||t.label;return r?(0,f.jsx)("div",{className:"govuk-form-group im-c-menu-group",children:(0,f.jsxs)("fieldset",{className:"im-c-menu-group__fieldset",children:[(0,f.jsx)("legend",{className:"im-c-menu-group__legend",children:(0,f.jsxs)("h3",{children:[" ",r," "]})}),n]})},t.id):(0,f.jsx)(f.Fragment,{children:n})};function b(e){return b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},b(e)}var v=function(e){var t=e.menuState,n=e.dispatch,r=e.menuGroup,o=r.id,i=r.items,u=r.visibleWhen;if(u&&!l(u))return null;var a=t[o],c=function(e){var t,r,i;n({type:"UPDATE_MENU_STATE",payload:(t={},r=o,i=e.target.value,(r=function(e){var t=function(e){if("object"!=b(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=b(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==b(t)?t:t+""}(r))in t?Object.defineProperty(t,r,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[r]=i,t)})};return(0,f.jsx)(d,{menuGroup:r,children:(0,f.jsx)("div",{className:"govuk-radios govuk-radios--small","data-module":"govuk-radios",children:i.map(function(e){return(0,f.jsx)(p,{menuGroupItem:e,name:o,checked:e.id===a,onChange:c},e.id)})})})};function y(e){return y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y(e)}var h=function(e){var t=e.dispatch,n=e.menuGroupItem,r=e.onChange,o=e.checked,i="im-c-menu__item govuk-checkboxes govuk-checkboxes--small".concat(o?"":" im-c-menu__item--checked"),u=m("checkbox-".concat(n.id));return(0,f.jsx)("div",{className:i,"data-module":"govuk-checkboxes",children:(0,f.jsxs)("div",{className:"govuk-checkboxes__item",children:[(0,f.jsx)("input",{className:"govuk-checkboxes__input",id:u,name:u,type:"checkbox",checked:o,onChange:function(e){var o,i,u,a,c=Boolean(null===(o=e.target)||void 0===o?void 0:o.checked);r&&r(c),t({type:"UPDATE_MENU_STATE",payload:(i={},u=n.id,a=c,(u=function(e){var t=function(e){if("object"!=y(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=y(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==y(t)?t:t+""}(u))in i?Object.defineProperty(i,u,{value:a,enumerable:!0,configurable:!0,writable:!0}):i[u]=a,i)})}}),(0,f.jsx)("label",{className:"im-c-menu__item-label govuk-label govuk-checkboxes__label",htmlFor:u,children:n.label})]})},u)},g=function(e){var t=e.dispatch,n=e.menuGroup,r=e.menuState;return(0,f.jsxs)(d,{menuGroup:n,children:[" ",n.items.map(function(e){return(0,f.jsx)(h,{dispatch:t,menuGroupItem:e,checked:r[e.id],onChange:e.handleOnChange},e.id)})]})},S=function(e){var t=e.menuGroup,n=e.dispatch,r=e.menuState;return"checkbox"===t.type?(0,f.jsx)(g,{menuGroup:t,dispatch:n,menuState:r}):(0,f.jsx)(v,{menuGroup:t,dispatch:n,menuState:r})},j=function(e){};function k(e){return k="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},k(e)}function x(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function _(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?x(Object(n),!0).forEach(function(t){O(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):x(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function O(e,t,n){return(t=function(e){var t=function(e){if("object"!=k(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=k(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==k(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var w={InitComponent:function(e){var t=e.pluginConfig,n=e.pluginState,o=e.mapState,i=e.services,u=n.dispatch,c=i.eventBus,l=(0,r.useRef)(n);l.current=n,(0,r.useEffect)(function(){return o.isMapReady?(function(e){a=e}(l),function(e){var t=e.eventBus,n=e.pluginStateRef;return(0,e.dispatch)({type:"SET_MENU",payload:{menu:e.menu}}),t.requestOnce("datasets:registry",j),t.emitWhenRequested("menu:state",n)}({menu:t.menu,eventBus:c,dispatch:u,pluginStateRef:l})):function(){}},[o.isMapReady]),(0,r.useEffect)(function(){return c.emit("menu:changed",n.menuState)},[n.menuState])},reducer:{initialState:{actionsArray:[],menu:[],menuState:{}},actions:{SET_MENU:function(e,t){var n=t.menu,r=function(e){var t={};return e.forEach(function(e){var n;"radio"===e.type&&(t[e.id]=e.value||(null===(n=e.items)||void 0===n?void 0:n[0].value))}),t}(n);return _(_({},e),{},{menu:n,menuState:r})},UPDATE_MENU_STATE:function(e,t){return _(_({},e),{},{menuState:_(_({},e.menuState),t)})}}},panels:[{id:"menu",label:"Layers",mobile:{slot:"drawer",modal:!0,dismissible:!0},tablet:{slot:"left-top",dismissible:!0,exclusive:!0,width:"260px"},desktop:{slot:"left-top",modal:!1,dismissible:!0,exclusive:!0,width:"280px"},render:function(e){var t=e.pluginState,n=e.appConfig,r=t.menu,o=void 0===r?[]:r,i=t.dispatch,u=t.menuState,a=(null==n?void 0:n.id)||"map",c=o.some(function(e){return e.groupLabel}),l="im-c-menu".concat(c?" im-c-menu--has-groups":"");return(0,f.jsx)(s,{value:"".concat(a,"-menu"),children:(0,f.jsxs)("div",{className:l,children:[" ",o.map(function(e){return(0,f.jsx)(S,{menuGroup:e,dispatch:i,menuState:u},e.id)})]})})}}],buttons:[{id:"menuButton",label:"Layers",panelId:"menu",iconId:"layersMenu",mobile:{slot:"top-left",showLabel:!0},tablet:{slot:"top-left",showLabel:!0},desktop:{slot:"top-left",showLabel:!0}}],icons:[{id:"layersMenu",svgContent:'<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>'}]}}}]);
+"use strict";(this.webpackChunkdefra_DefraMap=this.webpackChunkdefra_DefraMap||[]).push([[217],{742(e,t,n){n.r(t),n.d(t,{manifest:()=>E});var r=n(738);function o(e){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o(e)}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,u,a=[],c=!0,l=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);c=!0);}catch(e){l=!0,o=e}finally{try{if(!c&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(l)throw o}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return u(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?u(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var a={},c=function(e){for(var t,n=(null===(t=a)||void 0===t||null===(t=t.current)||void 0===t?void 0:t.menuState)||{},r=0,o=Object.entries(e);r<o.length;r++){var u=i(o[r],2),c=u[0],l=u[1],s=n[c];if(!l.includes(s))return!1}return!0},l=function(e){if(null==e)return!0;if("boolean"==typeof e)return e;if("object"===o(e)){for(var t=0,n=Object.entries(e);t<n.length;t++){var r=i(n[t],2),u=r[0],a=r[1];if("menu"===u&&!c(a))return!1}return!0}return!0},s=(0,r.createContext)("map-menu"),m=function(e){return"".concat((0,r.useContext)(s),"-").concat(e)},f=n(287),d=function(e){var t=e.menuGroupItem,n=e.name,r=e.checked,o=e.onChange,i=m("radio-".concat(t.id)),u=t.visibleWhen;return!u||l(u)?(0,f.jsx)("div",{className:'im-c-menu__item govuk-radios govuk-radios--small"',"data-module":"govuk-radios",children:(0,f.jsxs)("div",{className:"govuk-radios__item",children:[(0,f.jsx)("input",{id:i,className:"govuk-radios__input",type:"radio",name:n,value:t.id,checked:r,onChange:o}),(0,f.jsx)("label",{className:"im-c-menu__item-label govuk-label govuk-radios__label",htmlFor:i,children:t.label})]})}):null},p=function(e){var t=e.menuGroup,n=e.children,r=t.groupLabel||t.label;return r?(0,f.jsx)("div",{className:"govuk-form-group im-c-menu-group",children:(0,f.jsxs)("fieldset",{className:"im-c-menu-group__fieldset",children:[(0,f.jsx)("legend",{className:"im-c-menu-group__legend",children:(0,f.jsxs)("h3",{children:[" ",r," "]})}),n]})},t.id):(0,f.jsx)(f.Fragment,{children:n})};function b(e){return b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},b(e)}var v=function(e){var t=e.menuState,n=e.dispatch,r=e.menuGroup,o=r.id,i=r.items,u=r.visibleWhen;if(u&&!l(u))return null;var a=t[o],c=function(e){var t,r,i;n({type:"UPDATE_MENU_STATE",payload:(t={},r=o,i=e.target.value,(r=function(e){var t=function(e){if("object"!=b(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=b(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==b(t)?t:t+""}(r))in t?Object.defineProperty(t,r,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[r]=i,t)})};return(0,f.jsx)(p,{menuGroup:r,children:(0,f.jsx)("div",{className:"govuk-radios govuk-radios--small","data-module":"govuk-radios",children:i.map(function(e){return(0,f.jsx)(d,{menuGroupItem:e,name:o,checked:e.id===a,onChange:c},e.id)})})})};function y(e){return y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y(e)}var h=function(e){var t=e.dispatch,n=e.menuGroupItem,r=e.onChange,o=e.checked,i="im-c-menu__item govuk-checkboxes govuk-checkboxes--small".concat(o?"":" im-c-menu__item--checked"),u=m("checkbox-".concat(n.id));return(0,f.jsx)("div",{className:i,"data-module":"govuk-checkboxes",children:(0,f.jsxs)("div",{className:"govuk-checkboxes__item",children:[(0,f.jsx)("input",{className:"govuk-checkboxes__input",id:u,name:u,type:"checkbox",checked:o,onChange:function(e){var o,i,u,a,c=Boolean(null===(o=e.target)||void 0===o?void 0:o.checked);r&&r(c),t({type:"UPDATE_MENU_STATE",payload:(i={},u=n.id,a=c,(u=function(e){var t=function(e){if("object"!=y(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=y(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==y(t)?t:t+""}(u))in i?Object.defineProperty(i,u,{value:a,enumerable:!0,configurable:!0,writable:!0}):i[u]=a,i)})}}),(0,f.jsx)("label",{className:"im-c-menu__item-label govuk-label govuk-checkboxes__label",htmlFor:u,children:n.label})]})},u)},g=function(e){var t=e.dispatch,n=e.menuGroup,r=e.menuState;return(0,f.jsxs)(p,{menuGroup:n,children:[" ",n.items.map(function(e){return(0,f.jsx)(h,{dispatch:t,menuGroupItem:e,checked:r[e.id],onChange:e.handleOnChange},e.id)})]})},S=function(e){var t=e.menuGroup,n=e.dispatch,r=e.menuState;return"checkbox"===t.type?(0,f.jsx)(g,{menuGroup:t,dispatch:n,menuState:r}):(0,f.jsx)(v,{menuGroup:t,dispatch:n,menuState:r})},j=function(e){};function k(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function x(e){return x="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},x(e)}function w(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function _(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?w(Object(n),!0).forEach(function(t){O(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):w(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function O(e,t,n){return(t=function(e){var t=function(e){if("object"!=x(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=x(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==x(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var E={InitComponent:function(e){var t,n,o=e.pluginConfig,i=e.pluginState,u=e.mapState,c=e.services,s=i.dispatch,m=c.eventBus,f=(t=(0,r.useState)(!1),n=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,u,a=[],c=!0,l=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);c=!0);}catch(e){l=!0,o=e}finally{try{if(!c&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(l)throw o}}return a}}(t,n)||function(e,t){if(e){if("string"==typeof e)return k(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?k(e,t):void 0}}(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),d=f[0],p=f[1],b=(0,r.useRef)(i);b.current=i,(0,r.useEffect)(function(){if(!u.isMapReady)return function(){};!function(e){a=e}(b);var e=function(e){var t=e.menu,n=e.eventBus,r=e.dispatch,o=e.pluginStateRef,i=function(e){var t=new URL(window.location.href).searchParams,n={};return e.forEach(function(e){var r,o=t.get(e.id);"radio"===e.type?n[e.id]=o||e.value||(null===(r=e.items)||void 0===r?void 0:r[0].value):e.items.forEach(function(e){var t=e.id,r=e.checked,i=o?o.includes(t):r;n[t]=i})}),n}(t);return r({type:"SET_MENU",payload:{menu:t,menuState:i}}),n.requestOnce("datasets:registry",j),n.emitWhenRequested("menu:state",o)}({menu:o.menu,eventBus:m,dispatch:s,pluginStateRef:b});return p(!0),e},[u.isMapReady]),(0,r.useEffect)(function(){m.emit("menu:changed",i.menuState),d&&function(e){var t=new URL(window.location.href),n=t.searchParams,r=e.menu,o=e.menuState;r.forEach(function(e){var t=e.id,r=e.visibleWhen,i=e.type;l(r)?"radio"===i?function(e,t,n){var r=e.id,o=t[r];n.set(r,o)}(e,o,n):function(e,t,n){var r=e.id,o=e.items,i=[];o.forEach(function(e){var n=e.id;t[n]&&i.push(n)}),i.length?n.set(r,i):n.delete(r)}(e,o,n):n.delete(t)}),t.search=decodeURIComponent(t.search),window.history.replaceState({},"",t.toString())}(i)},[i.menuState])},reducer:{initialState:{menu:[],menuState:{}},actions:{SET_MENU:function(e,t){var n=t.menu,r=t.menuState;return _(_({},e),{},{menu:n,menuState:r})},UPDATE_MENU_STATE:function(e,t){return _(_({},e),{},{menuState:_(_({},e.menuState),t)})}}},panels:[{id:"menu",label:"Layers",mobile:{slot:"drawer",modal:!0,dismissible:!0},tablet:{slot:"left-top",dismissible:!0,exclusive:!0,width:"260px"},desktop:{slot:"left-top",modal:!1,dismissible:!0,exclusive:!0,width:"280px"},render:function(e){var t=e.pluginState,n=e.appConfig,r=t.menu,o=void 0===r?[]:r,i=t.dispatch,u=t.menuState,a=(null==n?void 0:n.id)||"map",c=o.some(function(e){return e.groupLabel}),l="im-c-menu".concat(c?" im-c-menu--has-groups":"");return(0,f.jsx)(s,{value:"".concat(a,"-menu"),children:(0,f.jsxs)("div",{className:l,children:[" ",o.map(function(e){return(0,f.jsx)(S,{menuGroup:e,dispatch:i,menuState:u},e.id)})]})})}}],buttons:[{id:"menuButton",label:"Layers",panelId:"menu",iconId:"layersMenu",mobile:{slot:"top-left",showLabel:!0},tablet:{slot:"top-left",showLabel:!0},desktop:{slot:"top-left",showLabel:!0}}],icons:[{id:"layersMenu",svgContent:'<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>'}]}}}]);

package/plugins/menu/dist/umd/index.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("defra",[],t):"object"==typeof exports?exports.defra=t():(e.defra=e.defra||{},e.defra.menuPlugin=t())}(this,()=>(()=>{"use strict";var e,t,r={738(e){e.exports=preactCompat},287(e){e.exports=preactJsxRuntime}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var i=n[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.m=r,o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce((t,r)=>(o.f[r](e,t),t),[])),o.u=e=>"im-menu-plugin.js",o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="defra.menuPlugin:",o.l=(r,n,i,a)=>{if(e[r])e[r].push(n);else{var u,c;if(void 0!==i)for(var f=document.getElementsByTagName("script"),p=0;p<f.length;p++){var l=f[p];if(l.getAttribute("src")==r||l.getAttribute("data-webpack")==t+i){u=l;break}}u||(c=!0,(u=document.createElement("script")).charset="utf-8",o.nc&&u.setAttribute("nonce",o.nc),u.setAttribute("data-webpack",t+i),u.src=r),e[r]=[n];var s=(t,n)=>{u.onerror=u.onload=null,clearTimeout(d);var o=e[r];if(delete e[r],u.parentNode&&u.parentNode.removeChild(u),o&&o.forEach(e=>e(n)),t)return t(n)},d=setTimeout(s.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=s.bind(null,u.onerror),u.onload=s.bind(null,u.onload),c&&document.head.appendChild(u)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;o.g.importScripts&&(e=o.g.location+"");var t=o.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),o.p=e})(),(()=>{var e={57:0};o.f.j=(t,r)=>{var n=o.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else{var i=new Promise((r,o)=>n=e[t]=[r,o]);r.push(n[2]=i);var a=o.p+o.u(t),u=new Error;o.l(a,r=>{if(o.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var i=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;u.message="Loading chunk "+t+" failed.\n("+i+": "+a+")",u.name="ChunkLoadError",u.type=i,u.request=a,n[1](u)}},"chunk-"+t,t)}};var t=(t,r)=>{var n,i,[a,u,c]=r,f=0;if(a.some(t=>0!==e[t])){for(n in u)o.o(u,n)&&(o.m[n]=u[n]);c&&c(o)}for(t&&t(r);f<a.length;f++)i=a[f],o.o(e,i)&&e[i]&&e[i][0](),e[i]=0},r=this.webpackChunkdefra_DefraMap=this.webpackChunkdefra_DefraMap||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var i={};function a(e){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a(e)}function u(){var e,t,r="function"==typeof Symbol?Symbol:{},n=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,n,o,i){var u=n&&n.prototype instanceof f?n:f,p=Object.create(u.prototype);return c(p,"_invoke",function(r,n,o){var i,u,c,f=0,p=o||[],l=!1,s={p:0,n:0,v:e,a:d,f:d.bind(e,4),d:function(t,r){return i=t,u=0,c=e,s.n=r,a}};function d(r,n){for(u=r,c=n,t=0;!l&&f&&!o&&t<p.length;t++){var o,i=p[t],d=s.p,b=i[2];r>3?(o=b===n)&&(c=i[(u=i[4])?5:(u=3,3)],i[4]=i[5]=e):i[0]<=d&&((o=r<2&&d<i[1])?(u=0,s.v=n,s.n=i[1]):d<b&&(o=r<3||i[0]>n||n>b)&&(i[4]=r,i[5]=n,s.n=b,u=0))}if(o||r>1)return a;throw l=!0,n}return function(o,p,b){if(f>1)throw TypeError("Generator is already running");for(l&&1===p&&d(p,b),u=p,c=b;(t=u<2?e:c)||!l;){i||(u?u<3?(u>1&&(s.n=-1),d(u,c)):s.n=c:s.v=c);try{if(f=2,i){if(u||(o="next"),t=i[o]){if(!(t=t.call(i,c)))throw TypeError("iterator result is not an object");if(!t.done)return t;c=t.value,u<2&&(u=0)}else 1===u&&(t=i.return)&&t.call(i),u<2&&(c=TypeError("The iterator does not provide a '"+o+"' method"),u=1);i=e}else if((t=(l=s.n<0)?c:r.call(n,s))!==a)break}catch(t){i=e,u=1,c=t}finally{f=1}}return{value:t,done:l}}}(r,o,i),!0),p}var a={};function f(){}function p(){}function l(){}t=Object.getPrototypeOf;var s=[][n]?t(t([][n]())):(c(t={},n,function(){return this}),t),d=l.prototype=f.prototype=Object.create(s);function b(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,l):(e.__proto__=l,c(e,o,"GeneratorFunction")),e.prototype=Object.create(d),e}return p.prototype=l,c(d,"constructor",l),c(l,"constructor",p),p.displayName="GeneratorFunction",c(l,o,"GeneratorFunction"),c(d),c(d,o,"Generator"),c(d,n,function(){return this}),c(d,"toString",function(){return"[object Generator]"}),(u=function(){return{w:i,m:b}})()}function c(e,t,r,n){var o=Object.defineProperty;try{o({},"",{})}catch(e){o=0}c=function(e,t,r,n){function i(t,r){c(e,t,function(e){return this._invoke(t,r,e)})}t?o?o(e,t,{value:r,enumerable:!n,configurable:!n,writable:!n}):e[t]=r:(i("next",0),i("throw",1),i("return",2))},c(e,t,r,n)}function f(e,t,r,n,o,i,a){try{var u=e[i](a),c=u.value}catch(e){return void r(e)}u.done?t(c):Promise.resolve(c).then(n,o)}function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach(function(t){s(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function s(e,t,r){return(t=function(e){var t=function(e){if("object"!=a(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=a(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==a(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(){var e,t;return l(l({noKeyItemText:"No features displayed"},arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),{},{id:"menu",load:(e=u().m(function e(){var t;return u().w(function(e){for(;;)switch(e.n){case 0:return e.n=1,o.e(217).then(o.bind(o,77));case 1:return t=e.v.manifest,e.a(2,t)}},e)}),t=function(){var t=this,r=arguments;return new Promise(function(n,o){var i=e.apply(t,r);function a(e){f(i,n,o,a,u,"next",e)}function u(e){f(i,n,o,a,u,"throw",e)}a(void 0)})},function(){return t.apply(this,arguments)})})}return o.d(i,{default:()=>d}),i.default})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("defra",[],t):"object"==typeof exports?exports.defra=t():(e.defra=e.defra||{},e.defra.menuPlugin=t())}(this,()=>(()=>{"use strict";var e,t,r={738(e){e.exports=preactCompat},287(e){e.exports=preactJsxRuntime}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var i=n[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.m=r,o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce((t,r)=>(o.f[r](e,t),t),[])),o.u=e=>"im-menu-plugin.js",o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="defra.menuPlugin:",o.l=(r,n,i,a)=>{if(e[r])e[r].push(n);else{var u,c;if(void 0!==i)for(var f=document.getElementsByTagName("script"),p=0;p<f.length;p++){var l=f[p];if(l.getAttribute("src")==r||l.getAttribute("data-webpack")==t+i){u=l;break}}u||(c=!0,(u=document.createElement("script")).charset="utf-8",o.nc&&u.setAttribute("nonce",o.nc),u.setAttribute("data-webpack",t+i),u.src=r),e[r]=[n];var s=(t,n)=>{u.onerror=u.onload=null,clearTimeout(d);var o=e[r];if(delete e[r],u.parentNode&&u.parentNode.removeChild(u),o&&o.forEach(e=>e(n)),t)return t(n)},d=setTimeout(s.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=s.bind(null,u.onerror),u.onload=s.bind(null,u.onload),c&&document.head.appendChild(u)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;o.g.importScripts&&(e=o.g.location+"");var t=o.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),o.p=e})(),(()=>{var e={57:0};o.f.j=(t,r)=>{var n=o.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else{var i=new Promise((r,o)=>n=e[t]=[r,o]);r.push(n[2]=i);var a=o.p+o.u(t),u=new Error;o.l(a,r=>{if(o.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var i=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;u.message="Loading chunk "+t+" failed.\n("+i+": "+a+")",u.name="ChunkLoadError",u.type=i,u.request=a,n[1](u)}},"chunk-"+t,t)}};var t=(t,r)=>{var n,i,[a,u,c]=r,f=0;if(a.some(t=>0!==e[t])){for(n in u)o.o(u,n)&&(o.m[n]=u[n]);c&&c(o)}for(t&&t(r);f<a.length;f++)i=a[f],o.o(e,i)&&e[i]&&e[i][0](),e[i]=0},r=this.webpackChunkdefra_DefraMap=this.webpackChunkdefra_DefraMap||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var i={};function a(e){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a(e)}function u(){var e,t,r="function"==typeof Symbol?Symbol:{},n=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,n,o,i){var u=n&&n.prototype instanceof f?n:f,p=Object.create(u.prototype);return c(p,"_invoke",function(r,n,o){var i,u,c,f=0,p=o||[],l=!1,s={p:0,n:0,v:e,a:d,f:d.bind(e,4),d:function(t,r){return i=t,u=0,c=e,s.n=r,a}};function d(r,n){for(u=r,c=n,t=0;!l&&f&&!o&&t<p.length;t++){var o,i=p[t],d=s.p,b=i[2];r>3?(o=b===n)&&(c=i[(u=i[4])?5:(u=3,3)],i[4]=i[5]=e):i[0]<=d&&((o=r<2&&d<i[1])?(u=0,s.v=n,s.n=i[1]):d<b&&(o=r<3||i[0]>n||n>b)&&(i[4]=r,i[5]=n,s.n=b,u=0))}if(o||r>1)return a;throw l=!0,n}return function(o,p,b){if(f>1)throw TypeError("Generator is already running");for(l&&1===p&&d(p,b),u=p,c=b;(t=u<2?e:c)||!l;){i||(u?u<3?(u>1&&(s.n=-1),d(u,c)):s.n=c:s.v=c);try{if(f=2,i){if(u||(o="next"),t=i[o]){if(!(t=t.call(i,c)))throw TypeError("iterator result is not an object");if(!t.done)return t;c=t.value,u<2&&(u=0)}else 1===u&&(t=i.return)&&t.call(i),u<2&&(c=TypeError("The iterator does not provide a '"+o+"' method"),u=1);i=e}else if((t=(l=s.n<0)?c:r.call(n,s))!==a)break}catch(t){i=e,u=1,c=t}finally{f=1}}return{value:t,done:l}}}(r,o,i),!0),p}var a={};function f(){}function p(){}function l(){}t=Object.getPrototypeOf;var s=[][n]?t(t([][n]())):(c(t={},n,function(){return this}),t),d=l.prototype=f.prototype=Object.create(s);function b(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,l):(e.__proto__=l,c(e,o,"GeneratorFunction")),e.prototype=Object.create(d),e}return p.prototype=l,c(d,"constructor",l),c(l,"constructor",p),p.displayName="GeneratorFunction",c(l,o,"GeneratorFunction"),c(d),c(d,o,"Generator"),c(d,n,function(){return this}),c(d,"toString",function(){return"[object Generator]"}),(u=function(){return{w:i,m:b}})()}function c(e,t,r,n){var o=Object.defineProperty;try{o({},"",{})}catch(e){o=0}c=function(e,t,r,n){function i(t,r){c(e,t,function(e){return this._invoke(t,r,e)})}t?o?o(e,t,{value:r,enumerable:!n,configurable:!n,writable:!n}):e[t]=r:(i("next",0),i("throw",1),i("return",2))},c(e,t,r,n)}function f(e,t,r,n,o,i,a){try{var u=e[i](a),c=u.value}catch(e){return void r(e)}u.done?t(c):Promise.resolve(c).then(n,o)}function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach(function(t){s(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function s(e,t,r){return(t=function(e){var t=function(e){if("object"!=a(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=a(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==a(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(){var e,t;return l(l({noKeyItemText:"No features displayed"},arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),{},{id:"menu",load:(e=u().m(function e(){var t;return u().w(function(e){for(;;)switch(e.n){case 0:return e.n=1,o.e(217).then(o.bind(o,742));case 1:return t=e.v.manifest,e.a(2,t)}},e)}),t=function(){var t=this,r=arguments;return new Promise(function(n,o){var i=e.apply(t,r);function a(e){f(i,n,o,a,u,"next",e)}function u(e){f(i,n,o,a,u,"throw",e)}a(void 0)})},function(){return t.apply(this,arguments)})})}return o.d(i,{default:()=>d}),i.default})());

package/plugins/menu/src/initialise/MenuInit.jsx

@@ -1,11 +1,13 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { createMenu } from './createMenu.js'
 import { attachPluginStateRef } from '../registry/isVisibleWhen.js'
+import { updateUrl } from './updateUrl.js'
 
 // additional possible params here are: appState, mapProvider,
 export function MenuInit ({ pluginConfig, pluginState, mapState, services }) {
   const { dispatch } = pluginState
   const { eventBus } = services
+  const [urlParsed, setUrlParsed] = useState(false)
 
   const pluginStateRef = useRef(pluginState)
   pluginStateRef.current = pluginState
@@ -16,9 +18,19 @@ export function MenuInit ({ pluginConfig, pluginState, mapState, services }) {
     }
     attachPluginStateRef(pluginStateRef)
     const { menu } = pluginConfig
-    return createMenu({ menu, eventBus, dispatch, pluginStateRef })
+    // createMenu parses the url and combines the url parameters with the dataset defaults
+    // that are passed to the plugin as 'menu: {...}'
+    const teardown = createMenu({ menu, eventBus, dispatch, pluginStateRef })
+    setUrlParsed(true)
+    return teardown
   }, [mapState.isMapReady])
 
   // Notify any plugins, that are listening, to the menu's state change
-  useEffect(() => eventBus.emit('menu:changed', pluginState.menuState), [pluginState.menuState])
+  // and update the url to reflect the new menu state
+  useEffect(() => {
+    eventBus.emit('menu:changed', pluginState.menuState)
+    if (urlParsed) { // Don't update the url until we have 1st parsed the url and initialised the menu
+      updateUrl(pluginState)
+    }
+  }, [pluginState.menuState])
 }

package/plugins/menu/src/initialise/MenuInit.test.jsx

@@ -1,11 +1,16 @@
 import { render } from '@testing-library/react'
 import { MenuInit } from './MenuInit.jsx'
 import { createMenu } from './createMenu.js'
+import { updateUrl } from './updateUrl.js'
 
 jest.mock('./createMenu.js', () => ({
   createMenu: jest.fn()
 }))
 
+jest.mock('./updateUrl.js', () => ({
+  updateUrl: jest.fn()
+}))
+
 const mockRemove = jest.fn()
 const mockDispatch = jest.fn()
 const eventBus = { on: jest.fn(), off: jest.fn(), emit: jest.fn(), emitWhenRequested: jest.fn() }
@@ -47,4 +52,24 @@ describe('MenuInit', () => {
     rerender(<MenuInit mapState={{ isMapReady: true }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
     expect(createMenu).toHaveBeenCalledTimes(1)
   })
+
+  it('emits menu:changed with the current menu state', () => {
+    const menuState = { datasets: 'floodZones' }
+    render(<MenuInit mapState={{ isMapReady: true }} services={services} pluginState={{ ...pluginState, menuState }} pluginConfig={pluginConfig} />)
+    expect(eventBus.emit).toHaveBeenCalledWith('menu:changed', menuState)
+  })
+
+  it('does not update the url before the url has been parsed', () => {
+    render(<MenuInit mapState={{ isMapReady: false }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    expect(updateUrl).not.toHaveBeenCalled()
+  })
+
+  it('updates the url when the menu state changes after the url has been parsed', () => {
+    const { rerender } = render(<MenuInit mapState={{ isMapReady: true }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    expect(updateUrl).not.toHaveBeenCalled()
+
+    const changedState = { ...pluginState, menuState: { datasets: 'coastalErosion' } }
+    rerender(<MenuInit mapState={{ isMapReady: true }} services={services} pluginState={changedState} pluginConfig={pluginConfig} />)
+    expect(updateUrl).toHaveBeenCalledWith(changedState)
+  })
 })

package/plugins/menu/src/initialise/createMenu.js

@@ -1,7 +1,9 @@
 import { setDatasetRegistry } from '../registry/getDatasetRegistry.js'
+import { buildMenuState } from '../reducers/menuStateReducer.js'
 
 export const createMenu = ({ menu, eventBus, dispatch, pluginStateRef }) => {
-  dispatch({ type: 'SET_MENU', payload: { menu } })
+  const menuState = buildMenuState(menu)
+  dispatch({ type: 'SET_MENU', payload: { menu, menuState } })
   // Request a handle on the datasetsRegistry singleton, so that the menu plugin can access it when needed
   eventBus.requestOnce('datasets:registry', setDatasetRegistry)
   // add a listener for the menu:state event, which will be emitted whenever requested by other plugins,

package/plugins/menu/src/initialise/createMenu.test.js

@@ -14,24 +14,39 @@ const makeEventBus = () => ({
 })
 
 describe('createMenu', () => {
-  it('dispatches SET_MENU with the menu', () => {
+  const menu = [{ id: 'datasets', type: 'radio', value: 'floodZones' }]
+
+  it('dispatches SET_MENU with the menu and the built menu state', () => {
     const eventBus = makeEventBus()
     const dispatch = jest.fn()
-    const menu = [{ id: 'layer1' }]
     createMenu({ menu, eventBus, dispatch, pluginStateRef: {} })
-    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_MENU', payload: { menu } })
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_MENU',
+      payload: { menu, menuState: { datasets: 'floodZones' } }
+    })
+  })
+
+  it('builds the menu state from the URL search params', () => {
+    window.history.replaceState({}, '', '?datasets=other')
+    const dispatch = jest.fn()
+    createMenu({ menu, eventBus: makeEventBus(), dispatch, pluginStateRef: {} })
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_MENU',
+      payload: { menu, menuState: { datasets: 'other' } }
+    })
+    window.history.replaceState({}, '', window.location.pathname)
   })
 
   it('calls requestOnce for the datasets registry', () => {
     const eventBus = makeEventBus()
-    createMenu({ eventBus, dispatch: jest.fn(), pluginStateRef: {} })
+    createMenu({ menu, eventBus, dispatch: jest.fn(), pluginStateRef: {} })
     expect(eventBus.requestOnce).toHaveBeenCalledWith('datasets:registry', setDatasetRegistry)
   })
 
   it('calls emitWhenRequested for menu:state', () => {
     const eventBus = makeEventBus()
     const pluginStateRef = { current: {} }
-    createMenu({ eventBus, dispatch: jest.fn(), pluginStateRef })
+    createMenu({ menu, eventBus, dispatch: jest.fn(), pluginStateRef })
     expect(eventBus.emitWhenRequested).toHaveBeenCalledWith('menu:state', pluginStateRef)
   })
 })

package/plugins/menu/src/initialise/updateUrl.js

@@ -0,0 +1,44 @@
+import { isVisibleWhen } from '../registry/isVisibleWhen.js'
+
+const _setRadioParam = (item, menuState, searchParams) => {
+  const { id: paramId } = item
+  const paramValue = menuState[paramId]
+  searchParams.set(paramId, paramValue)
+}
+
+const _setCheckBoxParameters = (item, menuState, searchParams) => {
+  const { id: paramId, items: checkboxes } = item
+  const paramValues = []
+  checkboxes.forEach(subItem => {
+    const { id: checkBoxId } = subItem
+    const checked = menuState[checkBoxId]
+    if (checked) {
+      paramValues.push(checkBoxId)
+    }
+  })
+  if (paramValues.length) {
+    searchParams.set(paramId, paramValues)
+  } else {
+    searchParams.delete(paramId)
+  }
+}
+
+export const updateUrl = (pluginState) => {
+  const url = new URL(window.location.href)
+  const { searchParams } = url
+  const { menu, menuState } = pluginState
+  menu.forEach(item => {
+    const { id: paramId, visibleWhen, type } = item
+    if (!isVisibleWhen(visibleWhen)) {
+      searchParams.delete(paramId)
+      return
+    }
+    if (type === 'radio') {
+      _setRadioParam(item, menuState, searchParams)
+    } else {
+      _setCheckBoxParameters(item, menuState, searchParams)
+    }
+  })
+  url.search = decodeURIComponent(url.search)
+  window.history.replaceState({}, '', url.toString())
+}