@cdc/map 4.24.12 → 4.25.1

package/src/components/Legend/components/Legend.tsx

@@ -1,5 +1,5 @@
 //TODO: Move legends to core
-import { forwardRef, useContext, useId } from 'react'
+import { forwardRef, useContext } from 'react'
 import parse from 'html-react-parser'
 
 //types
@@ -17,8 +17,9 @@ import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
 import { Group } from '@visx/group'
 import './index.scss'
-import { ViewportSize } from '@cdc/chart/src/types/ChartConfig'
+import { type ViewPort } from '@cdc/core/types/ViewPort'
 import { isBelowBreakpoint, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+import { displayDataAsText } from '@cdc/core/helpers/displayDataAsText'
 
 const LEGEND_PADDING = 30
 
@@ -26,22 +27,22 @@ type LegendProps = {
   skipId: string
   dimensions: DimensionsType
   containerWidthPadding: number
-  currentViewport: ViewportSize
+  currentViewport: ViewPort
 }
 
 const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
-  const { skipId, dimensions, containerWidthPadding, currentViewport } = props
+  const { skipId, containerWidthPadding } = props
+  const { isEditor, dimensions, currentViewport } = useContext(ConfigContext)
 
   const {
     // prettier-ignore
-    displayDataAsText,
     resetLegendToggles,
     runtimeFilters,
     runtimeLegend,
     setAccessibleStatus,
     setRuntimeLegend,
     state,
-    viewport,
+    currentViewport: viewport,
     mapId
   } = useContext(ConfigContext)
 
@@ -75,9 +76,9 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
   }
   const getFormattedLegendItems = () => {
     return runtimeLegend.map((entry, idx) => {
-      const entryMax = displayDataAsText(entry.max, 'primary')
+      const entryMax = displayDataAsText(entry.max, 'primary', state)
 
-      const entryMin = displayDataAsText(entry.min, 'primary')
+      const entryMin = displayDataAsText(entry.min, 'primary', state)
       let formattedText = `${entryMin}${entryMax !== entryMin ? ` - ${entryMax}` : ''}`
 
       // If interval, add some formatting
@@ -86,7 +87,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
       }
 
       if (legend.type === 'category') {
-        formattedText = displayDataAsText(entry.value, 'primary')
+        formattedText = displayDataAsText(entry.value, 'primary', state)
       }
 
       if (entry.max === 0 && entry.min === 0) {
@@ -116,12 +117,14 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
   const legendList = (patternsOnly = false) => {
     const formattedItems = patternsOnly ? [] : getFormattedLegendItems()
     const patternsOnlyFont = isMobileHeightViewport(currentViewport) ? '12px' : '14px'
+    const hasDisabledItems = formattedItems.some(item => item.disabled)
     let legendItems
 
     legendItems = formattedItems.map((item, idx) => {
       const handleListItemClass = () => {
         let classes = ['legend-container__li', 'd-flex', 'align-items-center']
         if (item.disabled) classes.push('legend-container__li--disabled')
+        else if (hasDisabledItems) classes.push('legend-container__li--not-disabled')
         if (item.special) classes.push('legend-container__li--special-class')
         return classes.join(' ')
       }
@@ -264,26 +267,33 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
           ref={ref}
         >
           <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
-            {legend.title && <h3 className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</h3>}
-            {legend.dynamicDescription === false && legend.description && (
-              <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>
+            {(legend.title || legend.description || legend.dynamicDescription) && (
+              <div className='mb-3'>
+                {legend.title && <h3 className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</h3>}
+                {legend.dynamicDescription === false && legend.description && (
+                  <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>
+                )}
+                {legend.dynamicDescription === true &&
+                  runtimeFilters.map((filter, idx) => {
+                    const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
+
+                    // Do we have a custom description for this?
+                    const desc = legend.descriptions[lookupStr] || ''
+
+                    if (desc.length > 0) {
+                      return (
+                        <p
+                          key={`dynamic-description-${lookupStr}`}
+                          className={`dynamic-legend-description-${lookupStr} mt-2`}
+                        >
+                          {desc}
+                        </p>
+                      )
+                    }
+                    return true
+                  })}
+              </div>
             )}
-            {legend.dynamicDescription === true &&
-              runtimeFilters.map((filter, idx) => {
-                const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
-
-                // Do we have a custom description for this?
-                const desc = legend.descriptions[lookupStr] || ''
-
-                if (desc.length > 0) {
-                  return (
-                    <p key={`dynamic-description-${lookupStr}`} className={`dynamic-legend-description-${lookupStr}`}>
-                      {desc}
-                    </p>
-                  )
-                }
-                return true
-              })}
 
             <LegendGradient
               labels={getFormattedLegendItems().map(item => item?.label) ?? []}
@@ -334,8 +344,8 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
               </>
             )}
             {runtimeLegend.disabledAmt > 0 && (
-              <Button className={legendClasses.resetButton.join(' ')} onClick={handleReset}>
-                Reset
+              <Button className={legendClasses.showAllButton.join(' ')} onClick={handleReset}>
+                Show All
               </Button>
             )}
           </section>

package/src/components/Legend/components/LegendItem.Hex.tsx

@@ -3,7 +3,7 @@ import { AiOutlineArrowUp, AiOutlineArrowDown, AiOutlineArrowRight } from 'react
 import parse from 'html-react-parser'
 
 const LegendItemHex = props => {
-  const { state, viewport } = props
+  const { state, currentViewport: viewport } = props
 
   const getItemShape = shape => {
     switch (shape) {
@@ -27,8 +27,12 @@ const LegendItemHex = props => {
       return (
         <aside id='legend' className={legendClasses.aside.join(' ')} role='region' aria-label='Legend' tabIndex={0}>
           <section className={legendClasses.section.join(' ')} aria-label='Map Legend'>
-            {shapeGroup.legendTitle && <h3 className={legendClasses.title.join(' ')}>{parse(shapeGroup.legendTitle)}</h3>}
-            {shapeGroup.legendDescription && <p className={legendClasses.description.join(' ')}>{parse(shapeGroup.legendDescription)}</p>}
+            {shapeGroup.legendTitle && (
+              <h3 className={legendClasses.title.join(' ')}>{parse(shapeGroup.legendTitle)}</h3>
+            )}
+            {shapeGroup.legendDescription && (
+              <p className={legendClasses.description.join(' ')}>{parse(shapeGroup.legendDescription)}</p>
+            )}
 
             <ul className={legendClasses.ul.join(' ')} aria-label='Legend items' style={{ listStyle: 'none' }}>
               {shapeGroup.items.map((item, itemIndex) => {

package/src/components/Legend/components/index.scss

@@ -16,11 +16,9 @@
     background-color: #fff;
     z-index: 6;
     border-top: var(--cool-gray-10) 1px solid;
+    border-radius: 6px;
 
     @include breakpointClass(md) {
-      .legend-container.legend-padding {
-        padding: 15px;
-      }
       &.bottom,
       &.top {
         border: var(--cool-gray-10) 1px solid;
@@ -70,21 +68,21 @@
     }
 
     .legend-container {
-      --space-between-legend-items: 0.6em;
       position: relative;
-      &.legend-padding {
-        padding-top: 15px;
+
+      .tspan {
+        font-size: var(--legend-item-font-size) !important;
       }
+
       .legend-container__title {
-        font-size: 1.3em;
+        font-size: var(--legend-title-font-size);
+        font-weight: var(--legend-title-font-weight);
         padding-bottom: 0;
         display: inline-block;
+        color: black;
       }
-      .legend-container__title + p,
-      .legend-container__title + ul,
-      p + ul,
-      p + p {
-        padding-top: 1em;
+      .legend-container__description {
+        font-size: var(--legend-description-font-size);
       }
       .legend-container__reset-button {
         margin-top: 1em;
@@ -92,11 +90,17 @@
       p {
         line-height: 1.4em;
       }
+
+      .legend-container__ul {
+        line-height: 1;
+        row-gap: var(--space-between-legend-item-rows);
+        column-gap: var(--space-between-legend-item-columns);
+      }
       .legend-container__ul:not(.single-row) {
         list-style: none;
-        padding-top: 1em;
         display: grid;
         grid-template-columns: 1fr;
+
         @include breakpoint(md) {
           grid-template-columns: 1fr 1fr;
         }
@@ -117,7 +121,6 @@
           flex-shrink: 0;
           display: inline-block;
           padding-right: 1em;
-          margin-bottom: var(--space-between-legend-items);
           vertical-align: middle;
           transition: 0.1s opacity;
           display: flex;
@@ -134,6 +137,11 @@
           &.legend-container__li--disabled {
             opacity: 0.4;
           }
+          &.legend-container__li--not-disabled {
+            outline: 1px solid #005ea2;
+            outline-offset: 5px;
+            border-radius: 1px;
+          }
         }
       }
       .legend-container__ul.single-row {
@@ -145,10 +153,8 @@
         align-items: center;
         justify-content: flex-start;
         flex-wrap: wrap;
-        row-gap: var(--space-between-legend-items);
 
         & > li {
-          margin-right: 1em;
           white-space: wrap;
           display: flex;
           justify-content: center;

package/src/components/Modal.tsx

@@ -4,18 +4,19 @@ import ConfigContext from '../context'
 import Icon from '@cdc/core/components/ui/Icon'
 
 const Modal = () => {
-  const { applyTooltipsToGeo, capitalize, applyLegendToRow, viewport, type, content } = useContext(ConfigContext)
-
+  const { applyTooltipsToGeo, applyLegendToRow, content, state, currentViewport: viewport } = useContext(ConfigContext)
+  const { capitalizeLabels } = state.tooltips
   const tooltip = applyTooltipsToGeo(content.geoName, content.keyedData, 'jsx')
-
+  const type = state.general.type
   const legendColors = applyLegendToRow(content.keyedData)
 
   return (
     <section
-      className={capitalize ? 'modal-content tooltip capitalize ' + viewport : 'modal-content tooltip ' + viewport}
+      className={
+        capitalizeLabels ? 'modal-content tooltip capitalize ' + viewport : 'modal-content tooltip ' + viewport
+      }
       aria-hidden='true'
     >
-      {type === 'data' && <LegendShape fill={legendColors[0]} />}
       <div className='content'>{tooltip}</div>
       <Icon display='close' alt='Close Modal' size={20} color='#000' className='modal-close' />
     </section>

package/src/components/NavigationMenu.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
+import ConfigContext from '../context'
 
 const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoName, mapTabbingID }) => {
+  const { state } = useContext(ConfigContext)
   const [activeGeo, setActiveGeo] = useState('')
-
   const [dropdownItems, setDropdownItems] = useState({})
 
   const handleSubmit = event => {
@@ -10,7 +11,7 @@ const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoN
     if (activeGeo !== '') {
       const urlString = data[dropdownItems[activeGeo]][columns.navigate.name]
 
-      navigationHandler(urlString)
+      navigationHandler(state.general.navigationTarget, urlString)
     }
   }
 
@@ -55,7 +56,7 @@ const NavigationMenu = ({ data, navigationHandler, options, columns, displayGeoN
         <label htmlFor={mapTabbingID.replace('#', '')}>
           <div className='select-heading'>{navSelect}</div>
           <select value={activeGeo} id={mapTabbingID.replace('#', '')} onChange={e => setActiveGeo(e.target.value)}>
-            {Object.keys(dropdownItems).map((key, i) => (
+            {Object.keys(dropdownItems).map(key => (
               <option key={key} value={key}>
                 {key}
               </option>

package/src/components/UsaMap/components/TerritoriesSection.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+type TerritoriesSectionProps = {
+  territories: JSX.Element[]
+  logo: string
+  config: any
+}
+
+const TerritoriesSection: React.FC<TerritoriesSectionProps> = ({ territories, logo, config }) => {
+  const usTerritories = territories
+    .filter(territory => {
+      return ['US-AS', 'US-GU', 'US-MP', 'US-PR', 'US-VI'].includes(territory?.props?.territory)
+    })
+    .sort((a, b) => {
+      return a.props.territory.localeCompare(b.props.territory)
+    })
+
+  const freelyAssociatedStates = territories
+    .filter(territory => {
+      return ['US-FM', 'US-MH', 'US-PW'].includes(territory?.props?.territory)
+    })
+    .sort((a, b) => {
+      return a.props.territory.localeCompare(b.props.territory)
+    })
+
+  return (
+    territories.length > 0 && (
+      <>
+        {/* Temporarily make the max width fit the image width */}
+        <div>
+          <div className='d-flex mt-4'>
+            {'data' === config.general.type && logo && (
+              <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
+            )}
+          </div>
+          <div>
+            {usTerritories.length > 0 && (
+              <>
+                <h5 className='territories-label'>U.S. Territories</h5>
+                <span className='mt-1 mb-2 d-flex flex-wrap territories'>{usTerritories}</span>
+              </>
+            )}
+            {freelyAssociatedStates.length > 0 && (
+              <>
+                <h5 className='territories-label'>Freely Associated States</h5>
+                <span className='mt-1 mb-2 d-flex flex-wrap territories'>{freelyAssociatedStates}</span>
+              </>
+            )}
+          </div>
+        </div>
+      </>
+    )
+  )
+}
+
+export default TerritoriesSection

package/src/components/UsaMap/components/Territory/Territory.Rectangle.tsx

@@ -54,7 +54,7 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
 
         {state.map.patterns.map((patternData, patternIndex) => {
           const patternColor = patternData.color || getContrastColor('#FFF', backgroundColor)
-          const hasMatchingValues = patternData.dataValue === territoryData[patternData.dataKey]
+          const hasMatchingValues = patternData.dataValue === territoryData?.[patternData.dataKey]
 
           if (!hasMatchingValues) return null
           if (!patternData.pattern) return null
@@ -96,8 +96,8 @@ const TerritoryRectangle: React.FC<TerritoryShape> = ({
                 fill={`url(#territory-${territory}-${patternData?.dataKey}--${patternIndex})`}
                 color={patternData ? 'white' : textColor}
                 className={[
-                  `territory-pattern-${patternData.dataKey}`,
-                  `territory-pattern-${patternData.dataKey}--${patternData.dataValue}`
+                  `territory-pattern-${patternData?.dataKey}`,
+                  `territory-pattern-${patternData?.dataKey}--${patternData.dataValue}`
                 ].join(' ')}
               />
               <text

package/src/components/UsaMap/components/UsaMap.County.tsx

@@ -22,6 +22,7 @@ import {
   createShapeProperties
 } from '../helpers/shapes'
 import { getGeoStrokeColor } from '../../../helpers/colors'
+import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
 
 const getCountyTopoURL = year => {
   return `https://www.cdc.gov/TemplatePackage/contrib/data/county-topography/cb_${year}_us_county_20m.json`
@@ -137,7 +138,6 @@ const CountyMap = props => {
       data,
       displayGeoName,
       geoClickHandler,
-      handleMapAriaLabels,
       runtimeFilters,
       runtimeLegend,
       setState,

package/src/components/UsaMap/components/UsaMap.Region.tsx

@@ -1,17 +1,23 @@
 import { useState, useEffect, memo, useContext } from 'react'
-import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 // 3rd party
 import { geoCentroid } from 'd3-geo'
 import { feature } from 'topojson-client'
 import { Mercator } from '@visx/geo'
 
-// cdc
+// Cdc Components
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import topoJSON from '../data/us-regions-topo-2.json'
 import ConfigContext from '../../../context'
 import Annotation from '../../Annotation'
+
+// Data
+import topoJSON from '../data/us-regions-topo-2.json'
+import { supportedTerritories } from '../../../data/supported-geos'
+
+// Helpers
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { getGeoFillColor, getGeoStrokeColor } from '../../../helpers/colors'
+import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.regions)
 
@@ -40,9 +46,7 @@ const UsaRegionMap = props => {
     data,
     displayGeoName,
     geoClickHandler,
-    handleMapAriaLabels,
     state,
-    supportedTerritories,
     tooltipId
   } = useContext(ConfigContext)
 
@@ -150,8 +154,8 @@ const UsaRegionMap = props => {
         <line
           x1={centroid[0]}
           y1={centroid[1]}
-          x2={centroid[0] + dx}
-          y2={centroid[1] + dy}
+          x2={centroid[0] + x}
+          y2={centroid[1] + y}
           stroke='rgba(0,0,0,.5)'
           strokeWidth={1}
         />
@@ -161,7 +165,7 @@ const UsaRegionMap = props => {
           fontSize={13}
           style={{ fill: '#202020' }}
           alignmentBaseline='middle'
-          transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
+          transform={`translate(${centroid[0] + x}, ${centroid[1] + y})`}
         >
           {abbr.substring(3)}
         </text>

package/src/components/UsaMap/components/UsaMap.SingleState.tsx

@@ -15,6 +15,8 @@ import { MapContext } from '../../../types/MapContext'
 import useStateZoom from '../../../hooks/useStateZoom'
 import { Text } from '@visx/text'
 import { getGeoStrokeColor } from '../../../helpers/colors'
+import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
+import { titleCase } from '../../../helpers/titleCase'
 
 // SVG ITEMS
 const WIDTH = 880
@@ -29,8 +31,6 @@ const SingleStateMap = props => {
     geoClickHandler,
     applyLegendToRow,
     displayGeoName,
-    handleMapAriaLabels,
-    titleCase,
     setSharedFilterValue,
     isFilterValueSupported,
     runtimeFilters,

package/src/components/UsaMap/components/UsaMap.State.tsx

@@ -5,6 +5,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 // United States Topojson resources
 import topoJSON from '../data/us-topo.json'
 import hexTopoJSON from '../data/us-hex-topo.json'
+import { supportedTerritories } from '../../../data/supported-geos'
 
 import { geoCentroid, geoPath } from 'd3-geo'
 import { feature } from 'topojson-client'
@@ -17,15 +18,16 @@ import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import HexIcon from './HexIcon'
 import { patternSizes } from '../helpers/patternSizes'
 import Annotation from '../../Annotation'
-
 import Territory from './Territory'
-import { cityKeys } from '../../../data/supported-geos'
 
 import useMapLayers from '../../../hooks/useMapLayers'
 import ConfigContext from '../../../context'
 import { MapContext } from '../../../types/MapContext'
-import { checkColorContrast, getContrastColor, getColorContrast } from '@cdc/core/helpers/cove/accessibility'
+import { checkColorContrast, getContrastColor, outlinedTextColor } from '@cdc/core/helpers/cove/accessibility'
 import { getGeoFillColor, getGeoStrokeColor } from '../../../helpers/colors'
+import { handleMapAriaLabels } from '../../../helpers/handleMapAriaLabels'
+import { titleCase } from '../../../helpers/titleCase'
+import TerritoriesSection from './TerritoriesSection'
 
 const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
 const { features: unitedStatesHex } = feature(hexTopoJSON, hexTopoJSON.objects.states)
@@ -61,11 +63,8 @@ const UsaMap = () => {
       data,
       displayGeoName,
       geoClickHandler,
-      handleMapAriaLabels,
       setSharedFilterValue,
       state,
-      supportedTerritories,
-      titleCase,
       tooltipId,
       handleDragStateChange,
       mapId,
@@ -407,7 +406,7 @@ const UsaMap = () => {
               {map.patterns.map((patternData, patternIndex) => {
                 const { pattern, dataKey, size } = patternData
                 const currentFill = styles.fill
-                const hasMatchingValues = patternData.dataValue === geoData[patternData.dataKey]
+                const hasMatchingValues = patternData.dataValue === geoData?.[patternData.dataKey]
                 const patternColor = patternData.color || getContrastColor('#000', currentFill)
 
                 if (!hasMatchingValues) return
@@ -521,12 +520,11 @@ const UsaMap = () => {
 
     if (undefined === abbr) return null
 
-    let textColor = getContrastColor('#FFF', bgColor)
-
-    // always make HI black since it is off to the side
+    // HI background is always white since it is off to the side
     if (abbr === 'US-HI' && !general.displayAsHex) {
-      textColor = '#000'
+      bgColor = '#FFF'
     }
+    const { textColor, strokeColor } = outlinedTextColor(bgColor)
 
     let x = 0,
       y = hexMap.type === 'shapes' && general.displayAsHex ? -10 : 5
@@ -540,7 +538,16 @@ const UsaMap = () => {
     if (undefined === offsets[abbr] || isHex) {
       return (
         <g transform={`translate(${centroid})`} tabIndex={-1}>
-          <text x={x} y={y} fontSize={14} strokeWidth='0' style={{ fill: textColor }} textAnchor='middle'>
+          <text
+            x={x}
+            y={y}
+            fontSize={14}
+            strokeWidth='0'
+            // paintOrder='stroke' // PENDING DEV-9278: Adds a stroke around the text potentially for 508 compliance
+            // stroke={strokeColor}
+            style={{ fill: textColor }}
+            textAnchor='middle'
+          >
             {abbr.substring(3)}
           </text>
         </g>
@@ -562,8 +569,10 @@ const UsaMap = () => {
         <text
           x={4}
           strokeWidth='0'
+          // paintOrder='stroke' // PENDING DEV-9278: Adds a stroke around the text potentially for 508 compliance
+          // stroke={strokeColor}
           fontSize={13}
-          style={{ fill: '#202020' }}
+          style={{ fill: textColor }}
           alignmentBaseline='middle'
           transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
         >
@@ -588,22 +597,7 @@ const UsaMap = () => {
         {annotations.length > 0 && <Annotation.Draggable onDragStateChange={handleDragStateChange} />}
       </svg>
 
-      {territories.length > 0 && (
-        <>
-          {/* Temporarily make the max width fit the image width */}
-          <div>
-            <div className='d-flex mt-2'>
-              <h5>{general.territoriesLabel}</h5>
-              {'data' === general.type && logo && (
-                <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
-              )}
-            </div>
-            <div>
-              <span className='mt-1 mb-2 d-flex flex-wrap territories'>{territories}</span>
-            </div>
-          </div>
-        </>
-      )}
+      <TerritoriesSection territories={territories} logo={logo} config={state} />
     </ErrorBoundary>
   )
 }

package/src/components/WorldMap/WorldMap.tsx

@@ -12,6 +12,9 @@ import BubbleList from '../BubbleList'
 import ConfigContext from '../../context'
 import ZoomControls from '../ZoomControls'
 import { getGeoFillColor, getGeoStrokeColor } from '../../helpers/colors'
+import { supportedCountries } from '../../data/supported-geos'
+import { handleMapAriaLabels } from '../../helpers/handleMapAriaLabels'
+import { titleCase } from '../../helpers/titleCase'
 
 const { features: world } = feature(topoJSON, topoJSON.objects.countries)
 
@@ -26,7 +29,6 @@ const WorldMap = () => {
     displayGeoName,
     generateRuntimeData,
     geoClickHandler,
-    handleMapAriaLabels,
     hasZoom,
     position,
     setFilteredCountryCode,
@@ -34,11 +36,7 @@ const WorldMap = () => {
     setRuntimeData,
     setState,
     state,
-    supportedCountries,
-    titleCase,
     tooltipId,
-    setScale,
-    setTranslate
   } = useContext(ConfigContext)
 
   // TODO Refactor - state should be set together here to avoid rerenders

package/src/context.ts

@@ -4,17 +4,12 @@ import { MapConfig } from './types/MapConfig'
 type MapContext = {
   applyLegendToRow
   applyTooltipsToGeo
-  closeModal
-  columnsInData
-  currentViewport
   data
-  displayDataAsText
   displayGeoName
   filteredCountryCode
   generateColorsArray
   generateRuntimeData
   geoClickHandler
-  handleMapAriaLabels
   handleCircleClick: Function
   hasZoom
   innerContainerRef
@@ -22,7 +17,6 @@ type MapContext = {
   isDebug
   isEditor
   loadConfig
-  navigationHandler
   position
   resetLegendToggles
   runtimeFilters
@@ -37,13 +31,7 @@ type MapContext = {
   setSharedFilterValue
   setState
   state: MapConfig
-  supportedCities
-  supportedCounties
-  supportedCountries
-  supportedTerritories
-  titleCase
   tooltipId: string
-  viewport
 }
 
 const ConfigContext = createContext({} as MapContext)