@defra/interactive-map 0.0.9-alpha → 0.0.11-alpha

package/src/App/renderer/mapButtons.js

@@ -31,6 +31,15 @@ function getMatchingButtons ({ appState, buttonConfig, slot, evaluateProp }) {
     if (config.inline === false && !appState.isFullscreen) {
       return false
     }
+
+    // Skip panel-toggle buttons when the panel is non-dismissible (always visible) at this breakpoint
+    if (config.panelId) {
+      const panelBpConfig = appState.panelConfig?.[config.panelId]?.[breakpoint]
+      if (panelBpConfig?.open === true && panelBpConfig?.dismissible === false) {
+        return false
+      }
+    }
+
     if (bpConfig?.slot !== slot || !allowedSlots.button.includes(bpConfig.slot)) {
       return false
     }
@@ -61,7 +70,48 @@ function createButtonClickHandler (btn, appState, evaluateProp) {
   }
 }
 
-function renderButton ({ btn, appState, appConfig, evaluateProp, groupStart, groupMiddle, groupEnd }) {
+/**
+ * Resolves the group name from a button config's group property.
+ * Accepts either the new object form `{ name, label?, order? }` or a deprecated plain string.
+ * @param {string|{name: string, label?: string, order?: number}|null|undefined} group
+ * @returns {string|null}
+ */
+function resolveGroupName (group) {
+  if (group == null) {
+    return null
+  }
+  return typeof group === 'string' ? group : (group.name ?? null)
+}
+
+/**
+ * Resolves the accessible label for a group.
+ * Uses `label` if provided, otherwise falls back to `name`.
+ * @param {string|{name: string, label?: string, order?: number}|null|undefined} group
+ * @returns {string}
+ */
+function resolveGroupLabel (group) {
+  if (!group) {
+    return ''
+  }
+  if (typeof group === 'string') {
+    return group
+  }
+  return group.label ?? group.name ?? ''
+}
+
+/**
+ * Resolves the slot-level order for a group.
+ * @param {string|{name: string, label?: string, order?: number}|null|undefined} group
+ * @returns {number}
+ */
+function resolveGroupOrder (group) {
+  if (!group || typeof group === 'string') {
+    return 0
+  }
+  return group.order ?? 0
+}
+
+function renderButton ({ btn, appState, appConfig, evaluateProp }) {
   const [buttonId, config] = btn
   const bpConfig = config[appState.breakpoint] ?? {}
   const handleClick = createButtonClickHandler(btn, appState, evaluateProp)
@@ -76,7 +126,7 @@ function renderButton ({ btn, appState, appConfig, evaluateProp, groupStart, gro
       variant={config.variant}
       label={evaluateProp(config.label, config.pluginId)}
       href={evaluateProp(config.href, config.pluginId)}
-      showLabel={bpConfig.showLabel}
+      showLabel={bpConfig.showLabel ?? true}
       isDisabled={appState.disabledButtons.has(buttonId)}
       isHidden={appState.hiddenButtons.has(buttonId)}
       isPressed={(config.isPressed !== undefined || config.pressedWhen) ? appState.pressedButtons.has(buttonId) : undefined}
@@ -86,9 +136,6 @@ function renderButton ({ btn, appState, appConfig, evaluateProp, groupStart, gro
       panelId={config.panelId}
       menuItems={config.menuItems}
       idPrefix={appConfig.id}
-      groupStart={groupStart}
-      groupMiddle={groupMiddle}
-      groupEnd={groupEnd}
     />
   )
 }
@@ -102,44 +149,97 @@ function mapButtons ({ slot, appState, appConfig, evaluateProp }) {
     return []
   }
 
-  const groupMap = new Map()
-  matching.forEach(([, config], idx) => {
-    const key = config.group
-    if (key == null) {
+  // Partition matching buttons into named groups and ungrouped singletons
+  const groupMap = new Map() // name -> { label, order, members: [[buttonId, config]] }
+  const singletons = []
+
+  matching.forEach(([buttonId, config]) => {
+    const { group } = config
+
+    if (group == null) {
+      singletons.push([buttonId, config])
       return
     }
-    if (!groupMap.has(key)) {
-      groupMap.set(key, [])
+
+    /* istanbul ignore next */
+    if (process.env.NODE_ENV !== 'production' && typeof group === 'string') {
+      console.warn(`[interactive-map] Button "${buttonId}": group should be an object { name, label?, order? } — string groups are deprecated.`)
     }
-    groupMap.get(key).push(idx)
-  })
 
-  for (const [key, indices] of groupMap) {
-    if (indices.length < 2) {
-      groupMap.delete(key)
+    const name = resolveGroupName(group)
+    const label = resolveGroupLabel(group)
+    const order = resolveGroupOrder(group)
+
+    if (groupMap.has(name)) {
+      const existing = groupMap.get(name)
+      /* istanbul ignore next */
+      if (process.env.NODE_ENV !== 'production' && existing.order !== order) {
+        console.warn(`[interactive-map] Group "${name}" has inconsistent order values (${existing.order} vs ${order}). Using the lower value.`)
+        existing.order = Math.min(existing.order, order)
+      }
+    } else {
+      groupMap.set(name, { label, order, members: [] })
     }
-  }
 
-  return matching.map((btn, idx) => {
+    groupMap.get(name).members.push([buttonId, config])
+  })
+
+  const result = []
+
+  // Ungrouped buttons — order is the breakpoint-level slot position
+  for (const btn of singletons) {
     const [buttonId, config] = btn
-    const key = config.group
-    const indices = key == null ? null : groupMap.get(key)
-    const groupStart = indices ? idx === indices[0] : false
-    const groupEnd = indices ? idx === indices[indices.length - 1] : false
-    const groupMiddle = indices && indices.length >= 3 && !groupStart && !groupEnd // NOSONAR: 3 = minimum for a start/middle/end group
     const order = config[breakpoint]?.order ?? 0
-
-    return {
+    result.push({
       id: buttonId,
       type: 'button',
       order,
-      element: renderButton({ btn, appState, appConfig, evaluateProp, groupStart, groupMiddle, groupEnd })
+      element: renderButton({ btn, appState, appConfig, evaluateProp })
+    })
+  }
+
+  for (const [groupName, { label, order: groupOrder, members }] of groupMap) {
+    if (members.length < 2) {
+      // Singleton group: degrade to a regular button using the group's slot order
+      const btn = members[0]
+      const [buttonId, config] = btn
+      const order = groupOrder || config[breakpoint]?.order || 0
+      result.push({
+        id: buttonId,
+        type: 'button',
+        order,
+        element: renderButton({ btn, appState, appConfig, evaluateProp })
+      })
+      continue
     }
-  })
+
+    // Sort group members by their intra-group order (breakpoint-level order prop)
+    const sorted = [...members].sort((a, b) => {
+      const orderA = a[1][breakpoint]?.order ?? 0
+      const orderB = b[1][breakpoint]?.order ?? 0
+      return orderA - orderB
+    })
+
+    result.push({
+      id: `group-${groupName}`,
+      type: 'group',
+      order: groupOrder,
+      element: (
+        <div key={`group-${groupName}`} role='group' aria-label={label} className='im-c-button-group'>{/* NOSONAR - div with role="group" is correct for a button group */}
+          {sorted.map(btn => renderButton({ btn, appState, appConfig, evaluateProp }))}
+        </div>
+      )
+    })
+  }
+
+  return result
 }
 
 export {
   mapButtons,
   getMatchingButtons,
-  renderButton
+  renderButton,
+  resolveGroupName,
+  resolveGroupLabel,
+  resolveGroupOrder
 }

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mapButtons, getMatchingButtons, renderButton } from './mapButtons.js'
+import { mapButtons, getMatchingButtons, renderButton, resolveGroupName, resolveGroupLabel, resolveGroupOrder } from './mapButtons.js'
 import { getPanelConfig } from '../registry/panelRegistry.js'
 
 jest.mock('../registry/buttonRegistry.js')
@@ -44,6 +44,52 @@ describe('mapButtons module', () => {
     getPanelConfig.mockReturnValue({})
   })
 
+  // -------------------------
+  // resolveGroup* helper tests
+  // -------------------------
+  describe('resolveGroupName', () => {
+    it('returns null when group is null or undefined', () => {
+      expect(resolveGroupName(null)).toBeNull()
+      expect(resolveGroupName(undefined)).toBeNull()
+    })
+    it('returns the string when group is a string', () => {
+      expect(resolveGroupName('g1')).toBe('g1')
+    })
+    it('returns group.name when group is an object', () => {
+      expect(resolveGroupName({ name: 'g1' })).toBe('g1')
+      expect(resolveGroupName({ name: undefined })).toBeNull()
+    })
+  })
+
+  describe('resolveGroupLabel', () => {
+    it('returns empty string when group is falsy', () => {
+      expect(resolveGroupLabel(null)).toBe('')
+      expect(resolveGroupLabel(undefined)).toBe('')
+    })
+    it('returns the string itself when group is a string', () => {
+      expect(resolveGroupLabel('My Group')).toBe('My Group')
+    })
+    it('returns group.label when provided, else group.name, else empty string', () => {
+      expect(resolveGroupLabel({ name: 'g1', label: 'Group One' })).toBe('Group One')
+      expect(resolveGroupLabel({ name: 'g1' })).toBe('g1')
+      expect(resolveGroupLabel({ order: 5 })).toBe('')
+    })
+  })
+
+  describe('resolveGroupOrder', () => {
+    it('returns 0 when group is falsy', () => {
+      expect(resolveGroupOrder(null)).toBe(0)
+      expect(resolveGroupOrder(undefined)).toBe(0)
+    })
+    it('returns 0 when group is a string', () => {
+      expect(resolveGroupOrder('g1')).toBe(0)
+    })
+    it('returns group.order when provided, else 0', () => {
+      expect(resolveGroupOrder({ name: 'g1', order: 5 })).toBe(5)
+      expect(resolveGroupOrder({ name: 'g1' })).toBe(0)
+    })
+  })
+
   // -------------------------
   // getMatchingButtons tests
   // -------------------------
@@ -92,25 +138,32 @@ describe('mapButtons module', () => {
       const config = { b1: baseBtn, b2: { ...baseBtn, isMenuItem: false } }
       expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState, evaluateProp }).length).toBe(2)
     })
+
+    it('filters out panel-toggle button when panel is open and non-dismissible at current breakpoint', () => {
+      const state = { ...appState, panelConfig: { myPanel: { desktop: { open: true, dismissible: false } } } }
+      const config = { b1: { ...baseBtn, panelId: 'myPanel' } }
+      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState: state, evaluateProp }).length).toBe(0)
+    })
+
+    it('includes panel-toggle button when panel is dismissible at current breakpoint', () => {
+      const state = { ...appState, panelConfig: { myPanel: { desktop: { open: true, dismissible: true } } } }
+      const config = { b1: { ...baseBtn, panelId: 'myPanel' } }
+      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState: state, evaluateProp }).length).toBe(1)
+    })
   })
 
   // -------------------------
   // renderButton tests
   // -------------------------
   describe('renderButton', () => {
-    const render = (config, state = appState, flags = {}) =>
-      renderButton({ btn: ['id', config], appState: state, appConfig, evaluateProp, groupStart: false, groupMiddle: false, groupEnd: false, ...flags })
+    const render = (config, state = appState) =>
+      renderButton({ btn: ['id', config], appState: state, appConfig, evaluateProp })
 
     it('renders a MapButton with correct basic props', () => {
       const result = render(baseBtn)
       expect(result.props).toMatchObject({ buttonId: 'id', iconId: 'i1', label: 'Btn', showLabel: true })
     })
 
-    it('applies group flags correctly', () => {
-      const result = render(baseBtn, appState, { groupStart: true, groupEnd: true })
-      expect(result.props).toMatchObject({ groupStart: true, groupEnd: true })
-    })
-
     it('evaluates dynamic label, iconId, and href via evaluateProp', () => {
       const label = jest.fn(() => 'DynamicLabel')
       const iconId = jest.fn(() => 'DynamicIcon')
@@ -162,7 +215,7 @@ describe('mapButtons module', () => {
 
     it('uses empty object fallback for missing breakpoint config', () => {
       const result = render(baseBtn, { ...appState, breakpoint: 'mobile' })
-      expect(result.props.showLabel).toBeUndefined()
+      expect(result.props.showLabel).toBe(true)
     })
 
     it('does nothing when clicked if button has no panelId and no onClick', () => {
@@ -192,21 +245,68 @@ describe('mapButtons module', () => {
       expect(result[0]).toMatchObject({ id: 'b1', type: 'button', order: 1 })
     })
 
-    it('sets groupStart, groupMiddle, and groupEnd flags correctly for multiple buttons', () => {
+    it('renders grouped buttons as a single group item with role=group', () => {
+      appState.buttonConfig = ({
+        b1: { ...baseBtn, group: { name: 'g1', label: 'Group 1', order: 2 } },
+        b2: { ...baseBtn, desktop: { slot: 'header', order: 2 }, group: { name: 'g1', label: 'Group 1', order: 2 } }
+      })
+      const result = map()
+      expect(result).toHaveLength(1)
+      expect(result[0]).toMatchObject({ id: 'group-g1', type: 'group', order: 2 })
+      expect(result[0].element.props.role).toBe('group')
+      expect(result[0].element.props['aria-label']).toBe('Group 1')
+    })
+
+    it('uses group name as aria-label when no explicit label is provided', () => {
+      appState.buttonConfig = ({
+        b1: { ...baseBtn, group: { name: 'g1', order: 0 } },
+        b2: { ...baseBtn, group: { name: 'g1', order: 0 } }
+      })
+      const result = map()
+      expect(result[0].element.props['aria-label']).toBe('g1')
+    })
+
+    it('sorts group members by intra-group order', () => {
       appState.buttonConfig = ({
-        b1: { ...baseBtn, group: 'g1' },
-        b2: { ...baseBtn, desktop: { slot: 'header', order: 2 }, group: 'g1' },
-        b3: { ...baseBtn, desktop: { slot: 'header', order: 3 }, group: 'g1' }
+        b1: { ...baseBtn, group: { name: 'g1', order: 0 }, desktop: { slot: 'header', order: 3 } },
+        b2: { ...baseBtn, group: { name: 'g1', order: 0 }, desktop: { slot: 'header', order: 1 } },
+        b3: { ...baseBtn, group: { name: 'g1', order: 0 }, desktop: { slot: 'header', order: 2 } }
       })
       const result = map()
-      expect(result[0].element.props).toMatchObject({ groupStart: true })
-      expect(result[1].element.props.groupMiddle).toBe(true)
-      expect(result[2].element.props).toMatchObject({ groupEnd: true })
+      expect(result).toHaveLength(1)
+      const children = result[0].element.props.children
+      expect(children[0].props.buttonId).toBe('b2')
+      expect(children[1].props.buttonId).toBe('b3')
+      expect(children[2].props.buttonId).toBe('b1')
+    })
+
+    it('renders singleton groups as regular buttons using group slot order', () => {
+      appState.buttonConfig = ({ b1: { ...baseBtn, group: { name: 'g1', label: 'Group 1', order: 3 } } })
+      const result = map()
+      expect(result).toHaveLength(1)
+      expect(result[0]).toMatchObject({ id: 'b1', type: 'button', order: 3 })
+    })
+
+    it('falls back to breakpoint order for singleton group when group order is 0', () => {
+      appState.buttonConfig = ({ b1: { ...baseBtn, desktop: { slot: 'header', order: 4 }, group: { name: 'g1', order: 0 } } })
+      expect(map()[0].order).toBe(4)
+    })
+
+    it('falls back to 0 for singleton group when both group order and breakpoint order are absent', () => {
+      appState.buttonConfig = ({ b1: { ...baseBtn, desktop: { slot: 'header' }, group: { name: 'g1', order: 0 } } })
+      expect(map()[0].order).toBe(0)
     })
 
-    it('ignores singleton groups when calculating group flags', () => {
-      appState.buttonConfig = ({ b1: { ...baseBtn, group: 'g1' } })
-      expect(map()[0].element.props).toMatchObject({ groupStart: false, groupEnd: false })
+    it('sorts group members treating missing breakpoint order as 0', () => {
+      appState.buttonConfig = ({
+        b1: { ...baseBtn, group: { name: 'g1', order: 0 }, desktop: { slot: 'header', order: 2 } },
+        b2: { ...baseBtn, group: { name: 'g1', order: 0 }, desktop: { slot: 'header' } },
+        b3: { ...baseBtn, group: { name: 'g1', order: 0 }, desktop: { slot: 'header', order: 1 } }
+      })
+      const children = map()[0].element.props.children
+      expect(children[0].props.buttonId).toBe('b2')
+      expect(children[1].props.buttonId).toBe('b3')
+      expect(children[2].props.buttonId).toBe('b1')
     })
 
     it('falls back to order 0 when order is not specified in breakpoint config', () => {

package/src/App/store/MapProvider.jsx

@@ -1,5 +1,5 @@
 // src/App/store/MapProvider.jsx
-import React, { createContext, useEffect, useReducer, useMemo } from 'react'
+import React, { createContext, useEffect, useReducer, useMemo, useRef } from 'react'
 import { initialState, reducer } from './mapReducer.js'
 import { EVENTS as events } from '../../config/events.js'
 
@@ -8,8 +8,11 @@ export const MapContext = createContext(null)
 export const MapProvider = ({ options, children }) => {
   const [state, dispatch] = useReducer(reducer, initialState(options))
 
-  const handleMapReady = (mapProvider) => {
-    dispatch({ type: 'SET_MAP_READY', payload: mapProvider })
+  const { eventBus } = options
+  const isMapSizeInitialisedRef = useRef(false)
+
+  const handleMapReady = () => {
+    dispatch({ type: 'SET_MAP_READY' })
   }
 
   const handleInitMapStyles = (mapStyles) => {
@@ -30,8 +33,6 @@ export const MapProvider = ({ options, children }) => {
   }
 
   // Listen to eventBus and update state
-  const { eventBus } = options
-
   useEffect(() => {
     eventBus.on(events.MAP_READY, handleMapReady)
     eventBus.on(events.MAP_INIT_MAP_STYLES, handleInitMapStyles)
@@ -46,6 +47,18 @@ export const MapProvider = ({ options, children }) => {
     }
   }, [])
 
+  // Emit map:sizechange when mapSize changes, skipping the initial value.
+  useEffect(() => {
+    if (!state.mapSize) {
+      return
+    }
+    if (!isMapSizeInitialisedRef.current) {
+      isMapSizeInitialisedRef.current = true
+      return
+    }
+    eventBus.emit(events.MAP_SIZE_CHANGE, { mapSize: state.mapSize })
+  }, [state.mapSize])
+
   // Persist mapStyle and mapSize in localStorage
   useEffect(() => {
     if (!state.mapStyle || !state.mapSize) {

package/src/App/store/MapProvider.test.jsx

@@ -71,6 +71,17 @@ describe('MapProvider', () => {
     expect(contextValue).toHaveProperty('isMapReady')
   })
 
+  test('subscribes to MAP_READY (not MAP_PROVIDER_READY)', () => {
+    render(
+      <MapProvider options={{ id: 'map1', mapSize: '100x100', eventBus: mockEventBus }}>
+        <div>Child</div>
+      </MapProvider>
+    )
+
+    expect(mockEventBus.on).toHaveBeenCalledWith('map:ready', expect.any(Function))
+    expect(mockEventBus.on).not.toHaveBeenCalledWith('map:providerready', expect.any(Function))
+  })
+
   test('subscribes and unsubscribes to eventBus', () => {
     render(
       <MapProvider options={{ id: 'map1', mapSize: '100x100', eventBus: mockEventBus }}>
@@ -78,7 +89,6 @@ describe('MapProvider', () => {
       </MapProvider>
     )
 
-    // Ensure all events subscribed
     expect(mockEventBus.on).toHaveBeenCalledWith('map:ready', expect.any(Function))
     expect(mockEventBus.on).toHaveBeenCalledWith('map:initmapstyles', expect.any(Function))
     expect(mockEventBus.on).toHaveBeenCalledWith('map:setstyle', expect.any(Function))
@@ -93,6 +103,51 @@ describe('MapProvider', () => {
     })
   })
 
+  test('dispatches SET_MAP_READY when MAP_READY fires', () => {
+    let contextValue
+    const Child = () => {
+      contextValue = React.useContext(MapContext)
+      return null
+    }
+
+    render(
+      <MapProvider options={{ id: 'map1', mapSize: '100x100', eventBus: mockEventBus }}>
+        <Child />
+      </MapProvider>
+    )
+
+    expect(contextValue.isMapReady).toBe(false)
+
+    act(() => {
+      capturedHandlers['map:ready']()
+    })
+
+    expect(contextValue.isMapReady).toBe(true)
+  })
+
+  test('emits map:sizechange when mapSize changes after initial value', () => {
+    render(
+      <MapProvider options={{ id: 'map1', mapSize: '100x100', eventBus: mockEventBus }}>
+        <div>Child</div>
+      </MapProvider>
+    )
+
+    // Initial mapSize set via initmapstyles — should NOT emit sizechange
+    act(() => {
+      capturedHandlers['map:initmapstyles']([{ id: 'style1' }])
+    })
+
+    const afterInitCalls = mockEventBus.emit.mock.calls.filter(([event]) => event === 'map:sizechange')
+    expect(afterInitCalls).toHaveLength(0)
+
+    // Subsequent size change — SHOULD emit sizechange
+    act(() => {
+      capturedHandlers['map:setsize']('large')
+    })
+
+    expect(mockEventBus.emit).toHaveBeenCalledWith('map:sizechange', { mapSize: 'large' })
+  })
+
   test('initMapStyles uses options.mapSize if localStorage has no saved mapSize', () => {
     const options = { id: 'map1', mapSize: '200x200', eventBus: mockEventBus }
     const mapStyles = [{ id: 'style1' }]

package/src/App/store/appActionsMap.js

@@ -74,19 +74,27 @@ const setBreakpoint = (state, payload) => {
     ? state.isFullscreen
     : getIsFullscreen({ behaviour, hybridWidth, maxMobileWidth })
 
+  const transitionedOpenPanels = lastPanelId
+    ? buildOpenPanels(state, lastPanelId, payload.breakpoint, state.openPanels[lastPanelId]?.props || {})
+    : {}
+
+  // Restore panels that are non-dismissible and always open at the new breakpoint
+  const panelConfig = state.panelConfig || state.panelRegistry.getPanelConfig()
+  const persistentPanels = Object.fromEntries(
+    Object.entries(panelConfig)
+      .filter(([panelId, config]) => {
+        const bpConfig = config[payload.breakpoint]
+        return bpConfig?.open === true && bpConfig?.dismissible === false && !transitionedOpenPanels[panelId]
+      })
+      .map(([panelId]) => [panelId, state.openPanels[panelId] || { props: {} }])
+  )
+
   return {
     ...state,
     breakpoint: payload.breakpoint,
     isFullscreen,
     previousOpenPanels: state.openPanels,
-    openPanels: lastPanelId
-      ? buildOpenPanels(
-        state,
-        lastPanelId,
-        payload.breakpoint,
-        state.openPanels[lastPanelId]?.props || {}
-      )
-      : {}
+    openPanels: { ...transitionedOpenPanels, ...persistentPanels }
   }
 }
 
@@ -289,7 +297,7 @@ const addPanel = (state, payload) => {
 
   // Check if panel should be initially open
   const bpConfig = panel?.[state.breakpoint]
-  const shouldOpen = bpConfig?.initiallyOpen
+  const shouldOpen = bpConfig?.open
 
   return {
     ...state,

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

@@ -11,9 +11,10 @@ describe('actionsMap full coverage', () => {
 
   beforeEach(() => {
     const mockPanelConfig = {
-      panel1: { desktop: { exclusive: true, modal: false, initiallyOpen: true }, mobile: { exclusive: true, modal: false } },
+      panel1: { desktop: { exclusive: true, modal: false, open: true }, mobile: { exclusive: true, modal: false } },
       panel2: { desktop: { exclusive: false, modal: true }, mobile: { exclusive: false, modal: true } },
-      panel3: { desktop: { exclusive: false, modal: false }, mobile: { exclusive: false, modal: false } }
+      panel3: { desktop: { exclusive: false, modal: false }, mobile: { exclusive: false, modal: false } },
+      panel4: { desktop: { open: true, dismissible: false }, mobile: { open: true, dismissible: true } }
     }
 
     state = {
@@ -171,15 +172,15 @@ describe('actionsMap full coverage', () => {
     expect(result.panelConfig.panelX).toBeDefined()
   })
 
-  test('ADD_PANEL adds panelConfig and opens initiallyOpen panel', () => {
-    const payload = { id: 'panelY', config: { desktop: { initiallyOpen: true } } }
+  test('ADD_PANEL adds panelConfig and opens panel when open=true', () => {
+    const payload = { id: 'panelY', config: { desktop: { open: true } } }
     const result = actionsMap.ADD_PANEL(state, payload)
     expect(result.panelConfig.panelY).toBeDefined()
     expect(result.openPanels.panelY).toBeDefined()
   })
 
-  test('ADD_PANEL does not open if initiallyOpen false', () => {
-    const payload = { id: 'panelZ', config: { desktop: { initiallyOpen: false } } }
+  test('ADD_PANEL does not open if open=false', () => {
+    const payload = { id: 'panelZ', config: { desktop: { open: false } } }
     const result = actionsMap.ADD_PANEL(state, payload)
     expect(result.panelConfig.panelZ).toBeDefined()
     expect(result.openPanels.panelZ).toBeUndefined()
@@ -274,6 +275,31 @@ describe('actionsMap full coverage', () => {
     expect(result.isFullscreen).toBe(true)
   })
 
+  test('SET_BREAKPOINT restores non-dismissible open panel at new breakpoint', () => {
+    const tmp = { ...state, openPanels: {} }
+    const result = actionsMap.SET_BREAKPOINT(tmp, { breakpoint: 'desktop', behaviour: 'responsive', hybridWidth: null, maxMobileWidth: 640 })
+    expect(result.openPanels.panel4).toBeDefined()
+  })
+
+  test('SET_BREAKPOINT does not force-open a non-dismissible panel where it is dismissible', () => {
+    const tmp = { ...state, openPanels: {} }
+    const result = actionsMap.SET_BREAKPOINT(tmp, { breakpoint: 'mobile', behaviour: 'responsive', hybridWidth: null, maxMobileWidth: 640 })
+    expect(result.openPanels.panel4).toBeUndefined()
+  })
+
+  test('SET_BREAKPOINT preserves existing props when restoring a non-dismissible panel', () => {
+    const props = { myProp: 'value' }
+    const tmp = { ...state, openPanels: { panel4: { props } } }
+    const result = actionsMap.SET_BREAKPOINT(tmp, { breakpoint: 'desktop', behaviour: 'responsive', hybridWidth: null, maxMobileWidth: 640 })
+    expect(result.openPanels.panel4.props).toEqual(props)
+  })
+
+  test('SET_BREAKPOINT uses panelRegistry.getPanelConfig() when panelConfig missing', () => {
+    const tmp = { ...state, panelConfig: undefined, openPanels: {} }
+    const result = actionsMap.SET_BREAKPOINT(tmp, { breakpoint: 'desktop', behaviour: 'responsive', hybridWidth: null, maxMobileWidth: 640 })
+    expect(result.openPanels.panel4).toBeDefined()
+  })
+
   test('SET_HYBRID_FULLSCREEN updates isFullscreen', () => {
     const tmp = { ...state, isFullscreen: false }
     const result = actionsMap.SET_HYBRID_FULLSCREEN(tmp, true)
@@ -294,7 +320,7 @@ describe('actionsMap full coverage', () => {
 
   test('ADD_PANEL skips registry if panelRegistry missing', () => {
     const tmp = { ...state, panelRegistry: undefined }
-    const payload = { id: 'panelY', config: { desktop: { initiallyOpen: true } } }
+    const payload = { id: 'panelY', config: { desktop: { open: true } } }
     const result = actionsMap.ADD_PANEL(tmp, payload)
     expect(result.panelConfig.panelY).toBeDefined()
     expect(result.openPanels.panelY).toBeDefined()

package/src/App/store/mapActionsMap.js

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