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

package/src/App/store/AppProvider.jsx

@@ -44,22 +44,6 @@ export const AppProvider = ({ options, children }) => {
 
   useMediaQueryDispatch(rawDispatch, options)
 
-  const handleBreakpointChange = breakpointDetector.subscribe((breakpoint) => {
-    dispatch({
-      type: 'SET_BREAKPOINT',
-      payload: {
-        behaviour: options.behaviour,
-        breakpoint,
-        hybridWidth: options.hybridWidth,
-        maxMobileWidth: options.maxMobileWidth
-      }
-    })
-  })
-
-  const handleInterfaceTypeChange = subscribeToInterfaceChanges((newType) => {
-    dispatch({ type: 'SET_INTERFACE_TYPE', payload: newType })
-  })
-
   const handleSetMode = (mode) => {
     dispatch({ type: 'SET_MODE', payload: mode })
   }
@@ -72,11 +56,27 @@ export const AppProvider = ({ options, children }) => {
     eventBus.on(events.APP_SET_MODE, handleSetMode)
     eventBus.on(events.APP_REVERT_MODE, handleRevertMode)
 
+    const unsubBreakpoint = breakpointDetector.subscribe((breakpoint) => {
+      dispatch({
+        type: 'SET_BREAKPOINT',
+        payload: {
+          behaviour: options.behaviour,
+          breakpoint,
+          hybridWidth: options.hybridWidth,
+          maxMobileWidth: options.maxMobileWidth
+        }
+      })
+    })
+
+    const unsubInterface = subscribeToInterfaceChanges((newType) => {
+      dispatch({ type: 'SET_INTERFACE_TYPE', payload: newType })
+    })
+
     return () => {
       eventBus.off(events.APP_SET_MODE, handleSetMode)
       eventBus.off(events.APP_REVERT_MODE, handleRevertMode)
-      handleBreakpointChange()
-      handleInterfaceTypeChange()
+      unsubBreakpoint()
+      unsubInterface()
     }
   }, [])
 

package/src/App/store/appActionsMap.js

@@ -91,6 +91,9 @@ const setBreakpoint = (state, payload) => {
 }
 
 const setInterfaceType = (state, payload) => {
+  if (state.interfaceType === payload) {
+    return state
+  }
   return {
     ...state,
     interfaceType: payload

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

@@ -83,6 +83,11 @@ describe('actionsMap full coverage', () => {
     expect(result.interfaceType).toBe('compact')
   })
 
+  test('SET_INTERFACE_TYPE returns same state reference when interfaceType unchanged', () => {
+    const result = actionsMap.SET_INTERFACE_TYPE(state, state.interfaceType)
+    expect(result).toBe(state)
+  })
+
   test('OPEN_PANEL adds a panel with props', () => {
     const result = actionsMap.OPEN_PANEL(state, { panelId: 'panel2', props: { foo: 'bar' } })
     expect(result.openPanels.panel2?.props).toEqual({ foo: 'bar' })

package/src/scss/settings/_colors.scss

@@ -43,7 +43,7 @@
     --fixed-foreground-color: #0b0c0c;
 
     // Content
-    --app-border-color: #b1b4b6;
+    --app-border-color: #cecece;
     --content-border-color: #f3f2f1;
     --secondary-text-color: #505a5f;
     --image-placeholder-color: #b1b4b6;

package/src/scss/settings/_dimensions.scss

@@ -12,8 +12,8 @@
 
     // Borders and focus
     --app-border-width: 1px;
-    --button-border-radius: 4px;
-    --panel-border-radius: 8px;
+    --button-border-radius: 0px; // 4px;
+    --panel-border-radius: 0px; // 8px;
     --focus-border-width: 3px;
     --focus-outline-width: 3px;
 

package/src/utils/detectInterfaceType.js

@@ -33,7 +33,7 @@ function notifyListeners (newType) {
 function createInterfaceDetector () {
   const mql = window.matchMedia('(pointer: coarse)')
 
-  // handle DevTools / system pointer type changes
+  // System pointer type changes
   const handleMediaChange = e => {
     notifyListeners(e.matches ? 'touch' : 'mouse')
   }
@@ -66,6 +66,7 @@ function createInterfaceDetector () {
 
 function getInterfaceType () {
   if (lastInterfaceType === 'unknown') {
+    lastInterfaceType = 'mouse'
     return 'mouse'
   }