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

package/src/config/defaults.js

@@ -16,13 +16,14 @@ const defaults = {
   containerHeight: '600px',
   deviceNotSupportedText: 'Your device is not supported. A map is available with a more up-to-date browser or device.',
   enableFullscreen: false,
-  enableMoveControl: true,
+  enableMoveControls: true,
   enableZoomControls: true,
   genericErrorText: 'There was a problem loading the map. Please try again later.',
   hasExitButton: false,
   backAndContinue: null,
   hybridWidth: null, // Defaults to maxMobileWidth if not set
   keyboardHintText: '<span class="im-u-visually-hidden">Press </span><kbd>Shift</kbd> + <span class="im-u-visually-hidden">Question mark</span><kbd aria-hidden="true">?</kbd> <span class="im-u-visually-hidden">to view </span>keyboard shortcuts',
+  mapHintText: 'Press Tab to focus it. Keyboard commands are only available once it has focus.', // Visually hidden text for assitive technology
   mapLabel: 'Interactive map application',
   mapProvider: null,
   mapSize: 'small',
@@ -31,6 +32,7 @@ const defaults = {
   urlPosition: 'sync',
   maxMobileWidth: 640,
   minDesktopWidth: 835,
+  moveControlsHintText: 'A "Move and zoom controls" button is also available, opening further controls for moving and zooming.',
   nudgePanDelta: 5,
   nudgeZoomDelta: 0.1,
   panDelta: 100,

package/src/config/events.js

@@ -147,6 +147,8 @@ export const EVENTS = {
   MAP_SET_SIZE: 'map:setsize',
   /** @internal Set the accessible features list. Payload: { items: { id: string, label: string }[] } */
   MAP_SET_FEATURES: 'map:setfeatures',
+  /** @internal Suppress/restore the accessible features list. Payload: { suppressed: boolean } */
+  MAP_SET_FEATURES_SUPPRESSED: 'map:setfeaturessuppressed',
   /** @internal Set the active feature in the accessible features list. Payload: { id: string | null } */
   MAP_SET_ACTIVE_FEATURE: 'map:setactivefeature',
   /** @internal Select the active listbox feature as the real selection (Enter key). Payload: none */

package/src/config/mergeConfig.js

@@ -13,5 +13,12 @@ export const mergeConfig = (userConfig = {}) => {
     config.mapViewQueryParam = mapViewParamKey
   }
 
+  // mapOnly has no launcher button or history entry to exit back to, so an exit
+  // button never makes sense there regardless of hasExitButton.
+  if (config.behaviour === 'mapOnly' && config.hasExitButton) {
+    console.warn('[InteractiveMap] hasExitButton has no effect when behaviour is \'mapOnly\' — there is nothing to exit to.')
+    config.hasExitButton = false
+  }
+
   return config
 }

package/src/config/mergeConfig.test.js

@@ -40,4 +40,24 @@ describe('mergeConfig', () => {
     expect(warnSpy).not.toHaveBeenCalled()
     warnSpy.mockRestore()
   })
+
+  it('sanitises hasExitButton to false for mapOnly behaviour', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    const result = mergeConfig({ behaviour: 'mapOnly', hasExitButton: true })
+    expect(result.hasExitButton).toBe(false)
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("hasExitButton has no effect when behaviour is 'mapOnly'"))
+    warnSpy.mockRestore()
+  })
+
+  it('leaves hasExitButton alone for non-mapOnly behaviours', () => {
+    const result = mergeConfig({ behaviour: 'buttonFirst', hasExitButton: true })
+    expect(result.hasExitButton).toBe(true)
+  })
+
+  it('does not warn when hasExitButton is already false for mapOnly', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    mergeConfig({ behaviour: 'mapOnly', hasExitButton: false })
+    expect(warnSpy).not.toHaveBeenCalled()
+    warnSpy.mockRestore()
+  })
 })

package/src/scss/main.scss

@@ -31,7 +31,7 @@
 @use '../App/components/Markers/Markers.module';
 @use '../App/components/Viewport/Features.module';
 @use '../App/components/Actions/Actions.module';
-@use '../App/components/MoveControl/MoveControl.module';
+@use '../App/components/MoveControls/MoveControls.module';
 
 // Components that dont have a corresponding React Component
 @use 'components';

package/src/scss/settings/_colors.scss

@@ -26,6 +26,7 @@
     // Tooltips
     --tooltip-background-color: #383F43;
     --tooltip-foreground-color: #ffffff;
+    --tooltip-hover-color: #505a5f;
 
     // Modals
     --modal-background-color: #0b0c0c;

package/src/scss/settings/_dimensions.scss

@@ -39,9 +39,8 @@
     --panel-close-button-gap: 4px;
     --panel-heading-margin-top: 12px;
     --panel-margin: 15px;
-    --banner-close-button-gap: 0px;
-    --banner-max-desktop-width: 400px;
-    --banner-collapse-margin: 14px;
+    --banner-preferred-width: 280px; // Docked max-width, and the gutter threshold JS docks/stacks against
+    --banner-border-radius: 0px; // Styled like a hint, not a panel
 
     // Popup menu
     --popup-menu-min-width: 200px;

package/src/scss/settings/_transition.scss

@@ -1,3 +1,3 @@
 :root {
-    --duration: 0.2s;
+    --duration: 0s;
 }

package/src/services/eventBus.js

@@ -108,6 +108,50 @@ class EventBus {
     return this.emit(eventName, ...args)
   }
 
+  /**
+   * Like `emit`, but also registers a listener for the corresponding `Required` event.
+   *
+   * Use this for events that may be requested before or after the emitter side is ready
+   * e.g. called from plugins that require a state reference from a different plugin like this:
+   * const removeRegistryListener = eventBus.emitWhenRequested('datasets:registry', datasetRegistry)
+   *
+   * @param {string} eventName
+   * @param {...*} args
+   * @returns {Function} A function to remove the listener for the `Required` event.
+   */
+  emitWhenRequested (eventName, ...args) {
+    const eventRequestedName = `${eventName}Requested`
+    const eventReadyName = `${eventName}Ready`
+    const handleOnRequired = () => this.emit(eventReadyName, ...args)
+    // Add a listener that will emit the event whenever requested
+    this.on(eventRequestedName, handleOnRequired)
+    // Also emit the event immediately, in case a listener is already waiting for it
+    handleOnRequired()
+    return () => this.off(eventRequestedName, handleOnRequired)
+  }
+
+  /**
+   * Like `emit`, but appends `Requested` to the event.
+   * used for events that require a response from another plugin,
+   * e.g. `datasets:registryRequested` will be emitted by the menu plugin,
+   * via `eventBus.requestOnce('datasets:registry')`, and the datasets plugin will respond with `datasets:registryReady`.
+   * and the datasets plugin will respond with `datasets:registryReady`.
+   * via `eventBus.emitWhenRequested('datasets:registry', datasetRegistry)`.
+   *
+   * @param {string} eventName
+   * @param {Function} eventHandler
+   * @returns {this}
+   */
+  requestOnce (eventName, eventHandler) {
+    const eventRequestedName = `${eventName}Requested`
+    const eventReadyName = `${eventName}Ready`
+    // Note - must register the once listener before emitting the requested event,
+    // otherwise the event won't emit, as there are no listeners yet.
+    this.once(eventReadyName, eventHandler)
+    this.emit(eventRequestedName, eventName)
+    return this
+  }
+
   /**
    * Remove all handlers and clear any queued events.
    */

package/src/services/eventBus.test.js

@@ -175,6 +175,89 @@ describe('emitWhenReady', () => {
   })
 })
 
+describe('emitWhenRequested', () => {
+  let bus
+  beforeEach(() => { bus = createEventBus() })
+
+  it('immediately emits eventNameReady so an already-waiting listener receives the args', () => {
+    const handler = jest.fn()
+    bus.on('datasets:registryReady', handler)
+    bus.emitWhenRequested('datasets:registry', 'registryValue')
+    expect(handler).toHaveBeenCalledWith('registryValue')
+  })
+
+  it('emits eventNameReady with args whenever eventNameRequested fires after registration', () => {
+    const handler = jest.fn()
+    bus.on('datasets:registryReady', handler)
+    bus.emitWhenRequested('datasets:registry', 'registryValue')
+    handler.mockClear()
+    bus.emit('datasets:registryRequested')
+    expect(handler).toHaveBeenCalledWith('registryValue')
+  })
+
+  it('forwards multiple args to the Ready event', () => {
+    const handler = jest.fn()
+    bus.on('datasets:registryReady', handler)
+    bus.emitWhenRequested('datasets:registry', 'a', 'b')
+    expect(handler).toHaveBeenCalledWith('a', 'b')
+  })
+
+  it('returns a cleanup function that stops responding to future Requested events', () => {
+    const handler = jest.fn()
+    bus.on('datasets:registryReady', handler)
+    const remove = bus.emitWhenRequested('datasets:registry', 'registryValue')
+    handler.mockClear()
+    remove()
+    bus.emit('datasets:registryRequested')
+    expect(handler).not.toHaveBeenCalled()
+  })
+})
+
+describe('requestOnce', () => {
+  let bus
+  beforeEach(() => { bus = createEventBus() })
+
+  it('calls the handler when eventNameReady fires', () => {
+    const handler = jest.fn()
+    bus.requestOnce('datasets:registry', handler)
+    bus.emit('datasets:registryReady', 'registryValue')
+    expect(handler).toHaveBeenCalledWith('registryValue')
+  })
+
+  it('calls the handler only once even if eventNameReady fires multiple times', () => {
+    const handler = jest.fn()
+    bus.requestOnce('datasets:registry', handler)
+    bus.emit('datasets:registryReady', 'first')
+    bus.emit('datasets:registryReady', 'second')
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+
+  it('emits eventNameRequested so the provider side knows it is needed', () => {
+    const requestedHandler = jest.fn()
+    bus.on('datasets:registryRequested', requestedHandler)
+    bus.requestOnce('datasets:registry', jest.fn())
+    expect(requestedHandler).toHaveBeenCalled()
+  })
+
+  it('returns this for chaining', () => {
+    expect(bus.requestOnce('datasets:registry', jest.fn())).toBe(bus)
+  })
+
+  it('works with emitWhenRequested when requestOnce is called first', () => {
+    const handler = jest.fn()
+    bus.requestOnce('datasets:registry', handler)
+    bus.emitWhenRequested('datasets:registry', 'registryValue')
+    expect(handler).toHaveBeenCalledWith('registryValue')
+  })
+
+  it('works with emitWhenRequested when emitWhenRequested is called first', () => {
+    const handler = jest.fn()
+    bus.emitWhenRequested('datasets:registry', 'registryValue')
+    bus.requestOnce('datasets:registry', handler)
+    expect(handler).toHaveBeenCalledWith('registryValue')
+  })
+})
+
 describe('createEventBus factory', () => {
   /**
    * Test to ensure coverage for the factory function (Line 50).

package/src/services/symbolRegistry.js

@@ -2,7 +2,7 @@ import { getValueForStyle } from '../utils/getValueForStyle.js'
 import { symbolDefaults, pin, circle, square, graphics } from '../config/symbolConfig.js'
 import { getSymbolStyleColors, getSymbolViewBox } from '../utils/symbolUtils.js'
 import { THEME_COLORS } from '../config/mapTheme.js'
-import { rasteriseToImageData } from '../../providers/maplibre/src/utils/rasteriseToImageData.js'
+import { rasteriseToImageData } from '../utils/rasteriseToImageData.js'
 
 const symbols = new Map()
 // Module-level cache: imageId → ImageData. Avoids re-rasterising identical symbols.

package/src/test-utils.js

@@ -32,6 +32,11 @@ export const createMockRegistries = (overrides = {}) => {
       registeredPlugins: [],
       registerPlugin: jest.fn(),
       clear: jest.fn()
+    },
+    keyboardShortcutRegistry: {
+      registerKeyboardShortcut: jest.fn(),
+      setProviderSupportedShortcuts: jest.fn(),
+      getKeyboardShortcuts: jest.fn(() => [])
     }
   }
 }

package/src/types.js

@@ -28,8 +28,18 @@
  *
  * @typedef {Object} ControlBreakpointConfig
  *
+ * @property {number} [order]
+ * The order the control appears within its slot (or, when targeting a panel, within that
+ * panel's body — see `slot` below).
+ *
  * @property {string} slot
- * Slot identifier.
+ * Slot identifier. In addition to the standard layout slots, a control may target a panel's
+ * body directly by setting this to `'<panelId>-panel'` (the panel id in kebab-case, suffixed
+ * with `-panel` — mirrors the `'<buttonId>-button'` convention panels use to render next to a
+ * specific button). Any plugin may target any panel this way, including one registered by a
+ * different plugin. The panel's own content and every control targeting it are ordered together
+ * via `order`. Only supported by panels with a `render` component — a panel using static `html`
+ * can't host injected controls, since `dangerouslySetInnerHTML` owns its body's children.
  */
 
 /**
@@ -697,8 +707,8 @@
  * @property {boolean} [enableFullscreen=false]
  * Whether a toggle fullscreen button is displayed.
  *
- * @property {boolean} [enableMoveControl=true]
- * Whether the move control is displayed — a button that reveals directional pan,
+ * @property {boolean} [enableMoveControls=true]
+ * Whether the move controls are displayed — a button that reveals directional pan,
  * zoom, and step-size buttons, providing a non-dragging alternative to panning
  * and zooming the map (WCAG 2.5.7). Unlike enableZoomControls, it remains visible
  * when the interface type is 'touch'. When enabled, enableZoomControls' buttons
@@ -706,7 +716,7 @@
  *
  * @property {boolean} [enableZoomControls=true]
  * Whether zoom control buttons are displayed. Not displayed when the interface
- * type is 'touch', or when enableMoveControl is enabled.
+ * type is 'touch', or when enableMoveControls is enabled.
  *
  * @property {[number, number, number, number]} [extent]
  * Initial extent [minX, minY, maxX, maxY]. Equivalent to bounds; use whichever matches your map provider's terminology.
@@ -722,16 +732,24 @@
  * In `mapOnly` behaviour the Back button is hidden when there is no browser history to go back to.
  *
  * @property {boolean} [hasExitButton=false]
- * Whether an exit map button is displayed when the app is fullscreen.
+ * Whether an exit map button is displayed. Only shown when the behaviour is `buttonFirst`
+ * or `hybrid` and the map is fullscreen - `mapOnly` has no launcher button or history entry
+ * to exit back to, so the exit button is never shown there.
  *
  * @property {number | null} [hybridWidth]
  * Optional breakpoint (in pixels) for hybrid behaviour. Defaults to 'maxMobileWidth' when not set.
  *
  * @property {string} [keyboardHintText]
- * HTML string providing keyboard shortcut instructions for accessibility users.
+ * HTML string providing keyboard shortcut instructions for accessibility users, announced via aria-describedby whenever the map viewport gains focus.
+ *
+ * @property {string} [mapHintText]
+ * Visually hidden text, rendered immediately before the map for screen reader users, explaining that it must be focused before keyboard commands work. Prefixed with mapLabel, so multiple maps on one page can be told apart.
  *
  * @property {string} [mapLabel='Interactive map']
- * Accessible label for the map, announced by screen readers.
+ * Accessible label for the map, announced by screen readers. Also prefixed onto mapHintText, so give each map on a page a distinct label.
+ *
+ * @property {string} [moveControlsHintText]
+ * Visually hidden text describing the move controls button, appended to keyboardHintText when enableMoveControls is true.
  *
  * @property {MapProviderDescriptor} [mapProvider]
  * A factory function that returns a map provider instance (e.g. maplibreProvider()).

package/webpack.umd.mjs

@@ -145,6 +145,8 @@ const ALL_BUILDS = [
   { entryPath: './plugins/search/src/index.js', libraryPath: 'searchPlugin', outDir: 'plugins/search/dist/umd' },
   { entryPath: './plugins/interact/src/index.js', libraryPath: 'interactPlugin', outDir: 'plugins/interact/dist/umd' },
   { entryPath: './plugins/datasets/src/index.js', libraryPath: 'datasetsPlugin', outDir: 'plugins/datasets/dist/umd', cssOutDir: 'plugins/datasets/dist' },
+  { entryPath: './plugins/map-key/src/index.js', libraryPath: 'mapKeyPlugin', outDir: 'plugins/map-key/dist/umd', cssOutDir: 'plugins/map-key/dist' },
+  { entryPath: './plugins/menu/src/index.js', libraryPath: 'menuPlugin', outDir: 'plugins/menu/dist/umd', cssOutDir: 'plugins/menu/dist' },
   { entryPath: './plugins/beta/map-styles/src/index.js', libraryPath: 'mapStylesPlugin', outDir: 'plugins/beta/map-styles/dist/umd' },
   { entryPath: './plugins/draw/src/index.js', libraryPath: 'drawPlugin', outDir: 'plugins/draw/dist/umd' },
   { entryPath: './plugins/beta/draw-ml/src/index.js', libraryPath: 'drawMLPlugin', outDir: 'plugins/beta/draw-ml/dist/umd' },

package/plugins/datasets/src/components/Key/EmptyKey.jsx

@@ -1,7 +0,0 @@
-export const EmptyKey = ({ text }) => {
-  return (
-    <div className='im-c-datasets-key'>
-      <p className='im-c-datasets-key__empty-message'>{text}</p>
-    </div>
-  )
-}

package/plugins/datasets/src/components/Key/Key.jsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import { EmptyKey } from './EmptyKey.jsx'
-import { KeyItem } from './KeyItem.jsx'
-import { KeyGroupItem } from './KeyGroupItem.jsx'
-import { datasetRegistry } from '../../registry/datasetRegistry.js'
-
-export const Key = ({
-  pluginConfig: { noKeyItemText },
-  mapState: { mapStyle },
-  services: { symbolRegistry, patternRegistry }
-}) => {
-  const { items: keyGroups, hasGroups } = datasetRegistry.keyItems()
-
-  if (!keyGroups?.length) {
-    return (<EmptyKey text={noKeyItemText} />)
-  }
-
-  const containerClass = `im-c-datasets-key${hasGroups ? ' im-c-datasets-key--has-groups' : ''}`
-  return (
-    <div className={containerClass}>{keyGroups.map(item => {
-      const key = item.type === 'group' ? item.groupLabel.toLowerCase().replaceAll(/\s+/g, '-') : item.dataset.id
-
-      if (item.type === 'sublayers' || item.type === 'group') {
-        const datasets = item.type === 'sublayers' ? item.sublayers : item.datasets
-        const label = item.type === 'sublayers' ? item.dataset.label : item.groupLabel
-        return (
-          <KeyGroupItem
-            key={key}
-            headingId={`key-heading-${key}`}
-            label={label}
-            datasets={datasets}
-            symbolRegistry={symbolRegistry}
-            patternRegistry={patternRegistry}
-            mapStyle={mapStyle}
-          />
-        )
-      }
-      return (
-        <KeyItem
-          key={key}
-          registryDataset={item.dataset}
-          symbolRegistry={symbolRegistry}
-          patternRegistry={patternRegistry}
-          mapStyle={mapStyle}
-        />
-      )
-    })}
-    </div>
-  )
-}

package/plugins/datasets/src/components/Key/KeyGroupItem.jsx

@@ -1,18 +0,0 @@
-import { KeyItem } from './KeyItem.jsx'
-
-export const KeyGroupItem = ({ headingId, label, datasets, symbolRegistry, patternRegistry, mapStyle }) => {
-  return (
-    <section className='im-c-datasets-key__group' aria-labelledby={headingId}>
-      <h3 id={headingId} className='im-c-datasets-key__group-heading'>{label}</h3>
-      {datasets.map(dataset =>
-        <KeyItem
-          key={`${dataset.id}`}
-          registryDataset={dataset}
-          symbolRegistry={symbolRegistry}
-          patternRegistry={patternRegistry}
-          mapStyle={mapStyle}
-        />
-      )}
-    </section>
-  )
-}

package/plugins/datasets/src/components/Key/KeyItem.jsx

@@ -1,23 +0,0 @@
-import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
-import { KeySvg } from './KeySvg.jsx'
-
-export const KeyItem = ({ registryDataset, symbolRegistry, patternRegistry, mapStyle }) => {
-  if (!registryDataset.showInKey) {
-    return null
-  }
-  return (
-    <dl className='im-c-datasets-key__item'>
-      <dt className='im-c-datasets-key__item-symbol'>
-        <KeySvg registryDataset={registryDataset} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
-      </dt>
-      <dd className='im-c-datasets-key__item-label'>
-        {registryDataset.label}
-        {registryDataset.symbolDescription && (
-          <span className='govuk-visually-hidden'>
-            ({getValueForStyle(registryDataset.symbolDescription, mapStyle.id)})
-          </span>
-        )}
-      </dd>
-    </dl>
-  )
-}

package/plugins/datasets/src/components/Key/KeySvg.jsx

@@ -1,22 +0,0 @@
-import { KeySvgPattern } from './KeySvgPattern.jsx'
-import { KeySvgSymbol } from './KeySvgSymbol.jsx'
-import { KeySvgLine } from './KeySvgLine.jsx'
-import { KeySvgRect } from './KeySvgRect.jsx'
-
-export const KeySvg = ({ symbolRegistry, registryDataset, mapStyle, patternRegistry }) => {
-  const { hasSymbol, hasPattern, style } = registryDataset
-  const symbolDef = hasSymbol && symbolRegistry.getSymbolDef(style)
-  if (symbolDef) {
-    return <KeySvgSymbol mapStyle={mapStyle} registryDataset={registryDataset} symbolRegistry={symbolRegistry} symbolDef={symbolDef} />
-  }
-
-  if (hasPattern) {
-    return <KeySvgPattern mapStyle={mapStyle} registryDataset={registryDataset} patternRegistry={patternRegistry} />
-  }
-
-  if (style.keySymbolShape === 'line') {
-    return <KeySvgLine mapStyle={mapStyle} registryDataset={registryDataset} />
-  }
-
-  return <KeySvgRect mapStyle={mapStyle} registryDataset={registryDataset} />
-}

package/plugins/datasets/src/components/Key/KeySvgLine.jsx

@@ -1,19 +0,0 @@
-import { svgProps, SVG_SIZE, SVG_CENTER } from './svgProperties.js'
-import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
-
-export const KeySvgLine = ({ mapStyle, registryDataset }) => {
-  const { style } = registryDataset
-  return (
-    <svg {...svgProps}>
-      <line
-        x1={style.strokeWidth / 2}
-        y1={SVG_CENTER}
-        x2={SVG_SIZE - style.strokeWidth / 2}
-        y2={SVG_CENTER}
-        stroke={getValueForStyle(style.stroke, mapStyle.id)}
-        strokeWidth={style.strokeWidth}
-        strokeLinecap='round'
-      />
-    </svg>
-  )
-}

package/plugins/datasets/src/components/Key/KeySvgPattern.jsx

@@ -1,13 +0,0 @@
-import { svgProps } from './svgProperties.js'
-const PATTERN_INSET = 2
-
-export const KeySvgPattern = ({ patternRegistry, registryDataset, mapStyle }) => {
-  const { style } = registryDataset
-  const paths = patternRegistry.getKeyPatternPaths(style, mapStyle.id)
-  return (
-    <svg {...svgProps}>
-      <g dangerouslySetInnerHTML={{ __html: paths.border }} />
-      <g transform={`translate(${PATTERN_INSET}, ${PATTERN_INSET})`} dangerouslySetInnerHTML={{ __html: paths.content }} />
-    </svg>
-  )
-}

package/plugins/datasets/src/components/Key/KeySvgRect.jsx

@@ -1,22 +0,0 @@
-import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
-import { svgProps, SVG_SIZE } from './svgProperties.js'
-
-export const KeySvgRect = ({ mapStyle, registryDataset }) => {
-  const { style } = registryDataset
-  return (
-    <svg {...svgProps}>
-      <rect
-        x={style.strokeWidth / 2}
-        y={style.strokeWidth / 2}
-        width={SVG_SIZE - style.strokeWidth}
-        height={SVG_SIZE - style.strokeWidth}
-        rx={style.strokeWidth}
-        ry={style.strokeWidth}
-        fill={getValueForStyle(style.fill, mapStyle.id)}
-        stroke={getValueForStyle(style.stroke, mapStyle.id)}
-        strokeWidth={style.strokeWidth}
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}

package/plugins/datasets/src/components/Key/KeySvgSymbol.jsx

@@ -1,16 +0,0 @@
-import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js'
-import { svgSymbolProps } from './svgProperties.js'
-
-export const KeySvgSymbol = ({ symbolRegistry, registryDataset, mapStyle, symbolDef }) => {
-  const { style } = registryDataset
-  const mapColorScheme = mapStyle?.appColorScheme ?? 'light'
-  const keyMapStyle = { ...mapStyle, mapColorScheme }
-
-  const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(style), keyMapStyle)
-  const viewBox = getSymbolViewBox(style, symbolDef)
-  return (
-    <svg {...svgSymbolProps} viewBox={viewBox}>
-      <g dangerouslySetInnerHTML={{ __html: resolvedSvg }} />
-    </svg>
-  )
-}

package/plugins/datasets/src/components/LayersMenu/LayersRadioGroupWrapper.jsx

@@ -1,41 +0,0 @@
-import React from 'react'
-import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
-import { LayersMenuRadio } from './LayersMenuRadio.jsx'
-
-export const LayersRadioGroupWrapper = ({ pluginState, menuGroup }) => {
-  const { id, items, visibleWhen } = menuGroup
-  const visible = visibleWhen ? isVisibleWhen(visibleWhen) : true
-  if (!visible) {
-    return null
-  }
-
-  const { menuState, dispatch } = pluginState
-  const value = menuState[id]
-  const handleChange = (event) => {
-    dispatch({ type: 'UPDATE_MENU_STATE', payload: { [id]: event.target.value } })
-  }
-
-  const wrapperClass = 'govuk-form-group im-c-datasets-layers-group'
-  return (
-    <div key={menuGroup.id} className={wrapperClass}>
-      <fieldset className='im-c-datasets-layers-group__fieldset'>
-        <legend className='im-c-datasets-layers-group__legend'>
-          <h3>
-            {menuGroup.label}
-          </h3>
-        </legend>
-        <div className='govuk-radios govuk-radios--small' data-module='govuk-radios'>
-          {items.map((menuGroupItem) =>
-            <LayersMenuRadio
-              key={menuGroupItem.id}
-              menuGroupItem={menuGroupItem}
-              name={id}
-              checked={menuGroupItem.id === value}
-              onChange={handleChange}
-            />
-          )}
-        </div>
-      </fieldset>
-    </div>
-  )
-}