@defra/interactive-map 0.0.4-alpha → 0.0.5-alpha

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

@@ -36,6 +36,7 @@ describe('mapButtons module', () => {
       disabledButtons: new Set(),
       hiddenButtons: new Set(),
       pressedButtons: new Set(),
+      expandedButtons: new Set(),
       buttonConfig: {},
       panelConfig: {}
     }
@@ -137,15 +138,16 @@ describe('mapButtons module', () => {
       })
     })
 
-    it('renders correct state flags for disabled, hidden, and pressed buttons', () => {
+    it('renders correct state flags for disabled, hidden, pressed and expanded buttons', () => {
       const state = {
         ...appState,
         disabledButtons: new Set(['id']),
         hiddenButtons: new Set(['id']),
-        pressedButtons: new Set(['id'])
+        pressedButtons: new Set(['id']),
+        expandedButtons: new Set(['id'])
       }
-      const result = render({ ...baseBtn, pressedWhen: jest.fn() }, state)
-      expect(result.props).toMatchObject({ isDisabled: true, isHidden: true, isPressed: true })
+      const result = render({ ...baseBtn, pressedWhen: jest.fn(), expandedWhen: jest.fn() }, state)
+      expect(result.props).toMatchObject({ isDisabled: true, isHidden: true, isPressed: true, isExpanded: true })
     })
 
     it('uses empty object fallback for missing breakpoint config', () => {

package/src/App/renderer/mapControls.js

@@ -2,6 +2,7 @@
 import React from 'react'
 import { withPluginContexts } from './pluginWrapper.js'
 import { allowedSlots } from './slots.js'
+import { isConsumerHtml } from './slotHelpers.js'
 
 /**
  * Map controls for a given slot and app state.
@@ -12,6 +13,11 @@ export function mapControls ({ slot, appState, evaluateProp }) {
 
   return Object.values(controlConfig)
     .filter(control => {
+      // Consumer HTML controls are managed by HtmlElementHost
+      if (isConsumerHtml(control)) {
+        return false
+      }
+
       const bpConfig = control[breakpoint]
       if (!bpConfig) {
         return false

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

@@ -90,14 +90,22 @@ describe('mapControls', () => {
     expect(result[0].order).toBe(0)
   })
 
-  it('renders HTML controls with dangerouslySetInnerHTML', () => {
+  it('renders plugin HTML controls with dangerouslySetInnerHTML', () => {
     defaultAppState.controlConfig = ({
-      ctrlHtml: { id: 'ctrlHtml', desktop: { slot: 'header' }, html: '<p>Hi</p>', includeModes: ['view'] }
+      ctrlHtml: { id: 'ctrlHtml', pluginId: 'plugin1', desktop: { slot: 'header' }, html: '<p>Hi</p>', includeModes: ['view'] }
     })
     const result = mapControls({ slot: 'header', appState: defaultAppState, evaluateProp: (p) => p })
     expect(result[0].element.props.dangerouslySetInnerHTML).toEqual({ __html: '<p>Hi</p>' })
   })
 
+  it('filters out consumer HTML controls (handled by HtmlElementHost)', () => {
+    defaultAppState.controlConfig = ({
+      ctrlHtml: { id: 'ctrlHtml', desktop: { slot: 'header' }, html: '<p>Hi</p>', includeModes: ['view'] }
+    })
+    const result = mapControls({ slot: 'header', appState: defaultAppState, evaluateProp: (p) => p })
+    expect(result).toEqual([])
+  })
+
   it('handles plugin-less controls gracefully', () => {
     defaultAppState.controlConfig = ({
       ctrl2: { id: 'ctrl2', desktop: { slot: 'header' }, render: () => <div />, includeModes: ['view'] }

package/src/App/renderer/mapPanels.js

@@ -4,7 +4,38 @@ import { stringToKebab } from '../../utils/stringToKebab.js'
 import { withPluginContexts } from './pluginWrapper.js'
 import { Panel } from '../components/Panel/Panel.jsx'
 import { allowedSlots } from './slots.js'
+import { resolveTargetSlot, isModeAllowed, isConsumerHtml } from './slotHelpers.js'
+
+/**
+ * Determines whether a panel should be rendered in the given slot.
+ * Checks slot eligibility, mode restrictions, inline/fullscreen constraints,
+ * and ensures only the topmost modal panel is shown.
+ */
+const isPanelVisible = (panelId, config, bpConfig, { targetSlot, slot, mode, isFullscreen, allowedModalPanelId }) => {
+  const isNextToButton = `${stringToKebab(panelId)}-button` === targetSlot
+  if (!allowedSlots.panel.includes(targetSlot) && !isNextToButton) {
+    return false
+  }
+  if (!isModeAllowed(config, mode)) {
+    return false
+  }
+  if (config.inline === false && !isFullscreen) {
+    return false
+  }
+  if (targetSlot !== slot) {
+    return false
+  }
+  if (bpConfig.modal && panelId !== allowedModalPanelId) {
+    return false
+  }
+  return true
+}
 
+/**
+ * Maps open panels to renderable entries for a given layout slot.
+ * Filters panels by slot, breakpoint, mode, and modal state, then wraps
+ * each panel's render function with the appropriate plugin contexts.
+ */
 export function mapPanels ({ slot, appState, evaluateProp }) {
   const { breakpoint, pluginRegistry, panelConfig, mode, openPanels } = appState
 
@@ -18,43 +49,25 @@ export function mapPanels ({ slot, appState, evaluateProp }) {
 
   return openPanelEntries.map(([panelId, { props }]) => {
     const config = panelConfig[panelId]
-
     if (!config) {
       return null
     }
 
-    const bpConfig = config[breakpoint]
-    if (!bpConfig) {
+    // Consumer HTML panels are managed by HtmlElementHost
+    if (isConsumerHtml(config)) {
       return null
     }
 
-    // Slot constriant: modal panels have a dedicated slot
-    let targetSlot = bpConfig.modal ? 'modal' : bpConfig.slot
-
-    // Slot constraint: bottom slot only permitted for mobile, revert to inset
-    if (targetSlot === 'bottom' && ['tablet', 'desktop'].includes(breakpoint)) {
-      targetSlot = 'inset'
-    }
-
-    const isNextToButton = `${stringToKebab(panelId)}-button` === targetSlot
-    const slotAllowed = allowedSlots.panel.includes(targetSlot) || isNextToButton
-    const inModeWhitelist = config.includeModes?.includes(mode) ?? true
-    const inExcludeModes = config.excludeModes?.includes(mode) ?? false
-
-    if (!slotAllowed || !inModeWhitelist || inExcludeModes) {
-      return null
-    }
-
-    // Skip panels marked as inline:false when not in fullscreen mode
-    if (config.inline === false && !appState.isFullscreen) {
+    const bpConfig = config[breakpoint]
+    if (!bpConfig) {
       return null
     }
 
-    if (targetSlot !== slot) {
-      return null
-    }
+    const targetSlot = resolveTargetSlot(bpConfig, breakpoint)
 
-    if (bpConfig.modal && panelId !== allowedModalPanelId) {
+    if (!isPanelVisible(panelId, config, bpConfig, {
+      targetSlot, slot, mode, isFullscreen: appState.isFullscreen, allowedModalPanelId
+    })) {
       return null
     }
 

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

@@ -65,6 +65,28 @@ describe('mapPanels', () => {
     expect(map()).toEqual([])
   })
 
+  it('skips panel if mode is not allowed (isModeAllowed returns false)', () => {
+    // 1. Define config that only allows 'edit' mode
+    const panelConfig = {
+      p1: {
+        desktop: { slot: 'header' },
+        includeModes: ['edit']
+      }
+    }
+
+    // 2. Mock appState with 'view' mode
+    const state = {
+      ...defaultAppState,
+      mode: 'view',
+      panelConfig,
+      openPanels: { p1: { props: {} } }
+    }
+
+    // 3. Verify it's filtered out even though it's the right slot
+    const result = map(state, 'header')
+    expect(result).toEqual([])
+  })
+
   it('only allows last opened modal panel', () => {
     defaultAppState.panelConfig = ({
       p1: { desktop: { modal: true }, includeModes: ['view'] },
@@ -159,4 +181,11 @@ describe('mapPanels', () => {
     })
     expect(map().map(p => p.id)).toEqual(['p1'])
   })
+
+  it('filters out consumer HTML panels (handled by HtmlElementHost)', () => {
+    defaultAppState.panelConfig = ({
+      p1: { desktop: { slot: 'header' }, html: '<p>Hi</p>', includeModes: ['view'] }
+    })
+    expect(map()).toEqual([])
+  })
 })

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

@@ -44,4 +44,32 @@ describe('withPluginContexts', () => {
 
     expect(Wrapped2).toBe(Wrapped1)
   })
+
+  it('filters buttonConfig by pluginId', () => {
+    const Inner = jest.fn(() => <div>Inner</div>)
+
+    // Provide a buttonConfig with buttons for multiple plugins
+    const appStateMock = {
+      user: 'testUser',
+      buttonConfig: {
+        btn1: { label: 'A', pluginId: 'plugin1' },
+        btn2: { label: 'B', pluginId: 'plugin2' }
+      }
+    }
+
+    // Override the useApp hook for this test
+    const { useApp } = require('../store/appContext.js')
+    useApp.mockImplementation(() => appStateMock)
+
+    const Wrapped = withPluginContexts(Inner, { pluginId: 'plugin1', pluginConfig: { foo: 'bar' } })
+
+    render(<Wrapped customProp='xyz' />)
+
+    const props = Inner.mock.calls[0][0]
+
+    // buttonConfig should include only buttons belonging to plugin1
+    expect(props.buttonConfig).toEqual({
+      btn1: { label: 'A', pluginId: 'plugin1' }
+    })
+  })
 })

package/src/App/renderer/slotHelpers.js

@@ -0,0 +1,60 @@
+// src/App/renderer/slotHelpers.js
+import { allowedSlots } from './slots.js'
+
+/**
+ * Resolves the target slot for a panel based on its breakpoint config.
+ * Modal panels always render in the 'modal' slot, and the bottom slot
+ * is only available on mobile — tablet and desktop fall back to 'inset'.
+ */
+export const resolveTargetSlot = (bpConfig, breakpoint) => {
+  if (bpConfig.modal) {
+    return 'modal'
+  }
+  if (bpConfig.slot === 'bottom' && ['tablet', 'desktop'].includes(breakpoint)) {
+    return 'inset'
+  }
+  return bpConfig.slot
+}
+
+/**
+ * Checks whether the current application mode permits an item to be shown,
+ * based on its includeModes and excludModes configuration.
+ */
+export const isModeAllowed = (config, mode) => {
+  if (config.includeModes && !config.includeModes.includes(mode)) {
+    return false
+  }
+  if (config.excludeModes?.includes(mode)) {
+    return false
+  }
+  return true
+}
+
+/**
+ * Checks whether a control should be visible based on breakpoint,
+ * mode, fullscreen, and slot constraints.
+ */
+export const isControlVisible = (control, { breakpoint, mode, isFullscreen }) => {
+  const bpConfig = control[breakpoint]
+  if (!bpConfig) {
+    return false
+  }
+  if (!allowedSlots.control.includes(bpConfig.slot)) {
+    return false
+  }
+  if (!isModeAllowed(control, mode)) {
+    return false
+  }
+  if (control.inline === false && !isFullscreen) {
+    return false
+  }
+  return true
+}
+
+/**
+ * Returns true if a panel/control was added via the consumer API with static HTML
+ * (i.e. not a plugin component).
+ */
+export const isConsumerHtml = (config) => {
+  return typeof config.html === 'string' && !config.pluginId
+}

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

@@ -0,0 +1,82 @@
+import { resolveTargetSlot, isModeAllowed, isControlVisible, isConsumerHtml } from './slotHelpers.js'
+
+jest.mock('./slots.js', () => ({ allowedSlots: { control: ['inset', 'banner', 'actions'] } }))
+
+describe('resolveTargetSlot', () => {
+  it('returns modal for modal panels', () => {
+    expect(resolveTargetSlot({ modal: true, slot: 'side' }, 'desktop')).toBe('modal')
+  })
+
+  it('replaces bottom with inset on tablet and desktop', () => {
+    expect(resolveTargetSlot({ slot: 'bottom' }, 'tablet')).toBe('inset')
+    expect(resolveTargetSlot({ slot: 'bottom' }, 'desktop')).toBe('inset')
+  })
+
+  it('keeps bottom on mobile', () => {
+    expect(resolveTargetSlot({ slot: 'bottom' }, 'mobile')).toBe('bottom')
+  })
+
+  it('returns slot as-is otherwise', () => {
+    expect(resolveTargetSlot({ slot: 'side' }, 'desktop')).toBe('side')
+  })
+})
+
+describe('isModeAllowed', () => {
+  it('returns true when no mode restrictions', () => {
+    expect(isModeAllowed({}, 'view')).toBe(true)
+  })
+
+  it('rejects when mode not in includeModes', () => {
+    expect(isModeAllowed({ includeModes: ['edit'] }, 'view')).toBe(false)
+  })
+
+  it('rejects when mode in excludeModes', () => {
+    expect(isModeAllowed({ excludeModes: ['view'] }, 'view')).toBe(false)
+  })
+
+  it('allows when mode matches includeModes', () => {
+    expect(isModeAllowed({ includeModes: ['view'] }, 'view')).toBe(true)
+  })
+})
+
+describe('isControlVisible', () => {
+  const base = { desktop: { slot: 'inset' } }
+
+  it('returns true for valid control', () => {
+    expect(isControlVisible(base, { breakpoint: 'desktop', mode: 'view', isFullscreen: false })).toBe(true)
+  })
+
+  it('returns false when breakpoint config missing', () => {
+    expect(isControlVisible(base, { breakpoint: 'mobile', mode: 'view', isFullscreen: false })).toBe(false)
+  })
+
+  it('returns false when slot not allowed', () => {
+    expect(isControlVisible({ desktop: { slot: 'invalid' } }, { breakpoint: 'desktop', mode: 'view', isFullscreen: false })).toBe(false)
+  })
+
+  it('returns false when mode not allowed', () => {
+    expect(isControlVisible({ ...base, includeModes: ['edit'] }, { breakpoint: 'desktop', mode: 'view', isFullscreen: false })).toBe(false)
+  })
+
+  it('returns false when inline:false and not fullscreen', () => {
+    expect(isControlVisible({ ...base, inline: false }, { breakpoint: 'desktop', mode: 'view', isFullscreen: false })).toBe(false)
+  })
+
+  it('returns true when inline:false and fullscreen', () => {
+    expect(isControlVisible({ ...base, inline: false }, { breakpoint: 'desktop', mode: 'view', isFullscreen: true })).toBe(true)
+  })
+})
+
+describe('isConsumerHtml', () => {
+  it('returns true for consumer HTML config', () => {
+    expect(isConsumerHtml({ html: '<p>Hi</p>' })).toBe(true)
+  })
+
+  it('returns false when pluginId present', () => {
+    expect(isConsumerHtml({ html: '<p>Hi</p>', pluginId: 'p1' })).toBe(false)
+  })
+
+  it('returns false when no html', () => {
+    expect(isConsumerHtml({ render: () => {} })).toBe(false)
+  })
+})

package/src/App/store/AppProvider.jsx

@@ -21,9 +21,12 @@ export const AppProvider = ({ options, children }) => {
     topRightColRef: useRef(null),
     insetRef: useRef(null),
     rightRef: useRef(null),
+    middleRef: useRef(null),
+    bottomRef: useRef(null),
     footerRef: useRef(null),
     actionsRef: useRef(null),
     bannerRef: useRef(null),
+    modalRef: useRef(null),
     viewportRef: useRef(null)
   }
 

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

@@ -4,6 +4,7 @@ import { AppProvider, AppContext } from './AppProvider.jsx'
 import { createMockRegistries } from '../../test-utils.js'
 import * as mediaHook from '../hooks/useMediaQueryDispatch.js'
 import * as detectInterface from '../../utils/detectInterfaceType.js'
+import * as appReducerModule from './appReducer.js'
 
 jest.mock('../hooks/useMediaQueryDispatch.js')
 jest.mock('../../utils/detectInterfaceType.js')
@@ -111,4 +112,43 @@ describe('AppProvider', () => {
     expect(contextValue.layoutRefs).toHaveProperty('mainRef')
     expect(contextValue.layoutRefs).toHaveProperty('footerRef')
   })
+
+  test('dispatch fallback uses options.panelRegistry.getPanelConfig() when state.panelConfig missing', () => {
+    const getPanelConfigMock = jest.fn(() => ({ panel1: {} }))
+
+    // Mock initialState to return state without panelConfig but with panelRegistry
+    jest.spyOn(appReducerModule, 'initialState').mockImplementation(() => ({
+      mode: 'view',
+      previousMode: 'edit',
+      openPanels: {},
+      previousOpenPanels: {},
+      interfaceType: 'default',
+      isFullscreen: false,
+      hasExclusiveControl: false,
+      panelRegistry: { getPanelConfig: getPanelConfigMock } // <-- provide it here!
+    }))
+
+    const mockEventBus = { on: jest.fn(), off: jest.fn() }
+    const mockBreakpointDetector = { subscribe: jest.fn(() => jest.fn()) }
+    const mockOptions = {
+      ...createMockRegistries({ panelConfig: undefined }),
+      eventBus: mockEventBus,
+      breakpointDetector: mockBreakpointDetector
+    }
+
+    render(
+      <AppProvider options={mockOptions}>
+        <div>Child</div>
+      </AppProvider>
+    )
+
+    // Trigger a dispatch via eventBus to hit the dispatch wrapper
+    act(() => {
+      mockEventBus.on.mock.calls.forEach(([event, handler]) => {
+        if (event === 'app:setmode') handler('newMode')
+      })
+    })
+
+    expect(getPanelConfigMock).toHaveBeenCalled()
+  })
 })

package/src/App/store/PluginProvider.jsx

@@ -27,19 +27,21 @@ export const PluginProvider = ({ children }) => {
     }
 
     // Initialize ref registry for each plugin
-    if (!refs.current[plugin.id]) refs.current[plugin.id] = {}
+    if (!refs.current[plugin.id]) {
+      refs.current[plugin.id] = {}
+    }
   })
 
   // Combined reducer
-  const combinedReducer = (state, action) => {
+  const combinedReducer = (pluginState, action) => {
     const { pluginId } = action
     if (pluginId && pluginReducers[pluginId]) {
       return {
-        ...state,
-        [pluginId]: pluginReducers[pluginId](state[pluginId], action)
+        ...pluginState,
+        [pluginId]: pluginReducers[pluginId](pluginState[pluginId], action)
       }
     }
-    return state
+    return pluginState
   }
 
   const [state, dispatch] = useReducer(combinedReducer, initialState)

package/src/App/store/appActionsMap.js

@@ -200,6 +200,22 @@ const toggleButtonPressed = (state, payload) => {
   }
 }
 
+const toggleButtonExpanded = (state, payload) => {
+  const { id, isExpanded } = payload
+  const updated = new Set(state.expandedButtons)
+
+  if (isExpanded) {
+    updated.add(id)
+  } else {
+    updated.delete(id)
+  }
+
+  return {
+    ...state,
+    expandedButtons: updated
+  }
+}
+
 // Registry mutation actions
 const registerButton = (state, payload) => {
   return {
@@ -230,6 +246,12 @@ const addButton = (state, payload) => {
     pressedButtons.add(id)
   }
 
+  // Set expanded state
+  const expandedButtons = new Set(state.expandedButtons)
+  if (config.isExpanded) {
+    expandedButtons.add(id)
+  }
+
   // Also update the registry instance for persistence across app lifecycle
   if (state.buttonRegistry?.addButton) {
     state.buttonRegistry.addButton(id, config)
@@ -240,7 +262,8 @@ const addButton = (state, payload) => {
     buttonConfig: newButtonConfig,
     hiddenButtons,
     disabledButtons,
-    pressedButtons
+    pressedButtons,
+    expandedButtons
   }
 }
 
@@ -334,6 +357,7 @@ export const actionsMap = {
   TOGGLE_BUTTON_DISABLED: toggleButtonDisabled,
   TOGGLE_BUTTON_HIDDEN: toggleButtonHidden,
   TOGGLE_BUTTON_PRESSED: toggleButtonPressed,
+  TOGGLE_BUTTON_EXPANDED: toggleButtonExpanded,
   // Registry actions
   REGISTER_BUTTON: registerButton,
   ADD_BUTTON: addButton,

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

@@ -30,6 +30,7 @@ describe('actionsMap full coverage', () => {
       disabledButtons: new Set(['btn1']),
       hiddenButtons: new Set(['btn3']),
       pressedButtons: new Set(['btn5']),
+      expandedButtons: new Set(['btn7']),
       panelConfig: mockPanelConfig,
       panelRegistry: { addPanel: jest.fn(), removePanel: jest.fn(), getPanelConfig: jest.fn(() => mockPanelConfig) },
       buttonConfig: {},
@@ -152,6 +153,13 @@ describe('actionsMap full coverage', () => {
     expect(r2.pressedButtons.has('btn5')).toBe(false)
   })
 
+  test('TOGGLE_BUTTON_EXPANDED adds/removes button', () => {
+    const r1 = actionsMap.TOGGLE_BUTTON_EXPANDED(state, { id: 'btn8', isExpanded: true })
+    expect(r1.expandedButtons.has('btn8')).toBe(true)
+    const r2 = actionsMap.TOGGLE_BUTTON_EXPANDED(state, { id: 'btn7', isExpanded: false })
+    expect(r2.expandedButtons.has('btn7')).toBe(false)
+  })
+
   test('REGISTER_PANEL updates panelConfig', () => {
     const payload = { id: 'panelX', config: { desktop: { slot: 'side' } } }
     const result = actionsMap.REGISTER_PANEL(state, payload)
@@ -204,6 +212,19 @@ describe('actionsMap full coverage', () => {
     expect(state.buttonRegistry.addButton).toHaveBeenCalled()
   })
 
+  test('ADD_BUTTON sets hidden, disabled, pressed and expanded state when config flags are true', () => {
+    const payload = {
+      id: 'btnSpecial',
+      config: { isHidden: true, isDisabled: true, isPressed: true, isExpanded: true }
+    }
+    const result = actionsMap.ADD_BUTTON(state, payload)
+    expect(result.buttonConfig.btnSpecial).toBeDefined()
+    expect(result.hiddenButtons.has('btnSpecial')).toBe(true)
+    expect(result.disabledButtons.has('btnSpecial')).toBe(true)
+    expect(result.pressedButtons.has('btnSpecial')).toBe(true)
+    expect(result.expandedButtons.has('btnSpecial')).toBe(true)
+  })
+
   // ---------------------- FALLBACK / OPTIONAL BRANCHES ----------------------
   test('SET_MODE uses panelRegistry.getPanelConfig() when panelConfig missing', () => {
     const tmp = { ...state, panelConfig: undefined }

package/src/App/store/appReducer.js

@@ -41,6 +41,7 @@ export const initialState = (config) => {
     disabledButtons: new Set(),
     hiddenButtons: new Set(),
     pressedButtons: new Set(),
+    expandedButtons: new Set(),
     hasExclusiveControl: false,
     openPanels,
     previousOpenPanels: {},

package/src/App/store/mapActionsMap.js

@@ -1,3 +1,12 @@
+/**
+ * Generic reducer action that shallow-merges the payload into state.
+ * Shared by MAP_MOVE, MAP_MOVE_END and MAP_FIRST_IDLE.
+ */
+const mergePayload = (state, payload) => ({
+  ...state,
+  ...payload
+})
+
 const setMapReady = (state) => {
   return {
     ...state,
@@ -5,27 +14,6 @@ const setMapReady = (state) => {
   }
 }
 
-const mapMove = (state, payload) => {
-  return {
-    ...state,
-    ...payload
-  }
-}
-
-const mapMoveEnd = (state, payload) => {
-  return {
-    ...state,
-    ...payload
-  }
-}
-
-const mapFirstIdle = (state, payload) => {
-  return {
-    ...state,
-    ...payload
-  }
-}
-
 const setMapStyle = (state, payload) => {
   return {
     ...state,
@@ -78,9 +66,9 @@ const removeMarker = (state, payload) => {
 
 export const actionsMap = {
   SET_MAP_READY: setMapReady,
-  MAP_MOVE: mapMove,
-  MAP_MOVE_END: mapMoveEnd,
-  MAP_FIRST_IDLE: mapFirstIdle,
+  MAP_MOVE: mergePayload,
+  MAP_MOVE_END: mergePayload,
+  MAP_FIRST_IDLE: mergePayload,
   SET_MAP_STYLE: setMapStyle,
   SET_MAP_SIZE: setMapSize,
   UPDATE_CROSS_HAIR: updateCrossHair,

package/src/App/store/mapReducer.js

@@ -19,7 +19,7 @@ export const initialState = (config) => {
 
   return {
     isMapReady: false,
-    mapStyle: !pluginHandlesMapStyles ? mapStyle : null,
+    mapStyle: pluginHandlesMapStyles ? null : mapStyle,
     mapSize,
     center,
     zoom,