@defra/interactive-map 0.0.40-alpha → 0.0.42-alpha

package/src/App/store/appDispatchMiddleware.js

@@ -101,7 +101,7 @@ export function handleActionSideEffects (action, previousState, panelConfig, eve
     const mergedConfig = deepMerge(defaultControlConfig, config)
     BREAKPOINTS.forEach(bp => {
       const slot = mergedConfig[bp]?.slot
-      if (slot && !allowedSlots.control.includes(slot)) {
+      if (slot && !allowedSlots.control.includes(slot) && !slot.endsWith('-panel')) {
         logger.warn(`control "${id}" has invalid slot "${slot}" at breakpoint "${bp}". Allowed slots: ${allowedSlots.control.join(', ')}.`)
       }
     })

package/src/App/store/appDispatchMiddleware.test.js

@@ -185,6 +185,14 @@ describe('ADD_CONTROL', () => {
     )
     expect(console.warn).not.toHaveBeenCalled()
   })
+
+  it('does not warn for a control targeting a panel-body slot', () => {
+    run(
+      { type: 'ADD_CONTROL', payload: { id: 'myCtrl', config: { desktop: { slot: 'map-styles-panel' } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).not.toHaveBeenCalled()
+  })
 })
 
 describe('ADD_PANEL', () => {

package/src/config/appConfig.js

@@ -74,7 +74,7 @@ export const defaultAppConfig = {
     desktop: buttonSlots
   }, {
     id: 'zoomIn',
-    group: { name: 'zoom', label: 'Zoom controls', order: 0 },
+    group: { label: 'Zoom controls', slotOrder: 0 },
     label: 'Zoom in',
     iconId: 'plus',
     keepFocus: true,
@@ -86,7 +86,7 @@ export const defaultAppConfig = {
     desktop: buttonSlots
   }, {
     id: 'zoomOut',
-    group: { name: 'zoom', label: 'Zoom controls', order: 0 },
+    group: { label: 'Zoom controls', slotOrder: 0 },
     label: 'Zoom out',
     iconId: 'minus',
     keepFocus: true,

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/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/types.js

@@ -28,8 +28,27 @@
  *
  * @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.
+ *
+ * @property {string} [tab]
+ * Groups this item into a tab within its target panel. Two items share a tab by giving it the
+ * same `tab` string (case/whitespace-insensitive — compared kebab-cased); items with no `tab`
+ * share one implicit tab, labelled with the panel's own `label`. Tabs only render once this
+ * produces more than one distinct group — a panel with zero or one tab renders flat, with no
+ * tab UI at all. A tab's position and displayed label both come from whichever member ends up
+ * first once its own members are ordered by `order`, so there's no separate tab-order property
+ * to set. Like `order`, only respected for controls with a `render` component.
  */
 
 /**
@@ -57,6 +76,11 @@
  * @property {string} slot
  * Slot identifier.
  *
+ * @property {string} [tab]
+ * Groups the panel's own content into a tab alongside any controls injected into it — see
+ * `ControlBreakpointConfig.tab`. Optional even once tabs are active: the panel's own content
+ * falls back to an implicit tab labelled with the panel's `label` when omitted.
+ *
  * @property {string} [width]
  * Panel width.
  */
@@ -146,8 +170,12 @@
  * @property {(context: PluginContext) => boolean} [excludeWhen]
  * Callback to determine if the button should be excluded from rendering.
  *
- * @property {string} [group]
- * Button group label for grouping related buttons.
+ * @property {{ label: string, slotOrder?: number }} [group]
+ * Groups this button with any other button sharing the same `label` (kebab-cased) into one
+ * `role="group"` container, rendered as a single item in the slot. `label` is also the
+ * group's accessible name (aria-label) — buttons whose labels differ only by case/whitespace
+ * still merge into one group. `slotOrder` positions the group itself within the slot (defaults
+ * to 0); each button's own breakpoint `order` controls its position *within* the group.
  *
  * @property {(context: PluginContext) => boolean} [hiddenWhen]
  * Callback to determine if the button should be hidden. Sets display: none if true.

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/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/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>
-  )
-}