@defra/interactive-map 0.0.10-alpha → 0.0.12-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/renderer/pluginWrapper.js

@@ -1,4 +1,5 @@
 // src/core/renderers/pluginWrapper.js
+import { useMemo } from 'react'
 import { useConfig } from '../store/configContext.js'
 import { useApp } from '../store/appContext.js'
 import { useMap } from '../store/mapContext.js'
@@ -59,11 +60,11 @@ export function withPluginContexts (Component, { pluginId, pluginConfig }) {
           services={services}
           mapProvider={appConfig.mapProvider}
           iconRegistry={getIconRegistry()}
-          buttonConfig={Object.fromEntries(
+          buttonConfig={useMemo(() => Object.fromEntries(
             Object.entries(appState.buttonConfig).filter(
               ([_, btn]) => btn.pluginId === pluginId
             )
-          )}
+          ), [appState.buttonConfig])}
         />
       )
     })

package/src/App/renderer/slots.js

@@ -30,10 +30,10 @@ export const allowedSlots = Object.freeze({
     layoutSlots.SIDE,
     layoutSlots.BANNER,
     layoutSlots.INSET,
+    layoutSlots.RIGHT_BOTTOM,
     layoutSlots.MIDDLE,
     layoutSlots.BOTTOM,
     layoutSlots.ACTIONS,
-    layoutSlots.DRAWER,
     layoutSlots.MODAL
   ],
   button: [

package/src/App/store/AppProvider.jsx

@@ -21,6 +21,7 @@ export const AppProvider = ({ options, children }) => {
     topRightColRef: useRef(null),
     insetRef: useRef(null),
     rightRef: useRef(null),
+    rightBottomRef: useRef(null),
     middleRef: useRef(null),
     bottomRef: useRef(null),
     footerRef: useRef(null),

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,