@cdc/map 4.25.10 → 4.26.1

package/src/hooks/useSynchronizedGeographies.ts

@@ -0,0 +1,56 @@
+import { useContext } from 'react'
+import ConfigContext from '../context'
+import { useProgrammaticMapTooltip } from './useProgrammaticMapTooltip'
+
+/**
+ * Hook to enable synchronized tooltips for map geographies in small multiples
+ *
+ * This abstracts all the small multiples synchronization logic so it can be
+ * easily added to any map type (US, Region, SingleState, World, etc.)
+ *
+ */
+export const useSynchronizedGeographies = () => {
+  const { handleSmallMultipleHover, mapRefForSync, tooltipId } = useContext(ConfigContext)
+
+  // Set up programmatic tooltip control for this map
+  const { registerGeoElement, unregisterGeoElement } = useProgrammaticMapTooltip({
+    mapRef: mapRefForSync || { current: null },
+    tooltipId
+  })
+
+  /**
+   * Returns props to spread onto geography elements for synchronized tooltip support
+   * Includes ref for programmatic control and data-geo-id for tooltip tracking
+   *
+   * @param geoKey - Geography identifier (FIPS code, state abbreviation, etc.)
+   */
+  const getSyncProps = (geoKey: string) => ({
+    ref: (el: SVGElement | null) => {
+      if (el) {
+        registerGeoElement(geoKey, el)
+      } else {
+        unregisterGeoElement(geoKey)
+      }
+    },
+    'data-geo-id': geoKey
+  })
+
+  /**
+   * Event handler helpers for synchronized tooltips
+   * Call these inside your existing event handlers
+   */
+  const syncHandlers = {
+    onMouseEnter: (geoKey: string, clientY: number) => {
+      handleSmallMultipleHover?.(geoKey, clientY)
+    },
+
+    onMouseLeave: () => {
+      handleSmallMultipleHover?.(null)
+    }
+  }
+
+  return {
+    getSyncProps,
+    syncHandlers
+  }
+}

package/src/index.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import '@cdc/core/styles/cove-main.scss'
+import '@cdc/core/components/EditorPanel/EditorPanel.styles.css'
 
 import CdcMap from './CdcMap'
 

package/src/scss/editor-panel.scss

@@ -1,3 +1,6 @@
+// Map-specific Editor Panel Styles
+// Common editor panel styles are imported from @cdc/core/styles/editor-panel-base via cove-main.scss
+
 .post-type-cdc_visualization {
   .cove {
     // Temp Radio button fix
@@ -14,8 +17,8 @@
     // End Temp Radio button fix
   }
 }
-.cdc-open-viz-module {
 
+.cdc-open-viz-module {
   .editor-panel {
     .cove-input-group,
     .cove-accordion__small-inputs {
@@ -92,287 +95,9 @@
       margin-left: 0.3rem;
     }
 
-
-    .form-container {
-      border-right: var(--lightGray) 1px solid;
-      flex-grow: 1;
-    }
-
-    .guidance-link {
-      margin: 2em 1em 0;
-      padding: 0.75em 1em;
-      align-items: center;
-      .heading-3 {
-        font-weight: 600;
-        font-size: 1.2em;
-      }
-      svg {
-        width: 60px;
-        color: var(--blue);
-        margin-right: 1rem;
-        height: 60px; // IE11
-        path {
-          fill: currentColor;
-        }
-      }
-    }
-    .warning {
-      color: #d8000c;
-      background-color: #ffd2d2;
-      padding: 0.75em 1em;
-      margin: 1em 0;
-      font-size: 0.8em;
-      border: #d8000c 1px solid;
-      border-radius: 0.4em;
-      strong {
-        font-weight: 600;
-        display: block;
-      }
-    }
-    .accordion__button {
-      cursor: pointer;
-      font-size: 1em;
-      padding: 0.3em 1em;
-      width: 100%;
-      text-align: left;
-      position: relative;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
-    .accordion__button:before {
-      display: inline-block;
-      content: '';
-      height: 7px;
-      width: 7px;
-      margin-right: 1em;
-      border-bottom: 2px solid currentColor;
-      border-right: 2px solid currentColor;
-      right: 0;
-      position: absolute;
-      top: 50%;
-      transform: rotate(-45deg) translateY(-50%);
-      transition: 0.1s all;
-    }
-
-    .accordion__button[aria-expanded='true']::before,
-    .accordion__button[aria-selected='true']::before {
-      top: 45%;
-      transform: rotate(45deg) translateY(-50%);
-      margin-right: 1.3em;
-      transition: 0.1s all;
-    }
-
-    .accordion__panel {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-      padding: 1em 1.25em 2em;
-      animation: fadein 0.2s ease-in;
-      span.h5 {
-        font-size: 0.8em;
-      }
-      & p.layer-purpose-details {
-        margin-top: 1em;
-      }
-    }
-
-    .advanced {
-      padding: 0 1em 1em;
-      text-align: left;
-      p {
-        font-size: 0.8rem;
-      }
-      .advanced-toggle-link {
-        padding-top: 1em;
-        display: block;
-        text-align: left;
-        cursor: pointer;
-        text-decoration: underline;
-        span {
-          text-decoration: none;
-          display: inline-block;
-          font-family: monospace;
-          padding-right: 5px;
-        }
-        &:hover {
-          color: rgba(0, 0, 0, 0.7);
-        }
-      }
-      textarea {
-        height: 400px;
-        width: 100%;
-        font-size: 0.9em;
-        padding: 0.5em;
-        font-family: monospace;
-        box-sizing: border-box;
-      }
-    }
-
-    @keyframes fadein {
-      0% {
-        opacity: 0;
-      }
-
-      100% {
-        opacity: 1;
-      }
-    }
-
-    .base-label {
-      background: #565656;
-      color: #fff;
-      font-size: 1.1em;
-      padding: 0.6em 1em;
-      position: relative;
-      border-bottom: #565656 3px solid;
-      z-index: 3;
-    }
-
-    label {
-      text-transform: uppercase;
-      display: block;
-      font-size: 0.8em;
-      font-weight: 600;
-      &:not(:first-child) {
-        margin-top: 1em;
-      }
-      span.edit-label {
-        margin-bottom: 0.3em;
-        display: flex;
-      }
-      span.column-heading {
-        font-size: 1em;
-      }
-      &.checkbox {
-        margin-top: 0.5rem;
-        display: flex;
-
-        input {
-          margin-left: 0;
-          width: inherit;
-          display: inline;
-        }
-      }
-    }
-    input[type='text'],
-    input[role='combobox'],
-    input[type='number'],
-    textarea {
-      min-width: 100%;
-      max-width: 100%; // Doing this prevents width of textarea from being changed
-    }
     textarea {
       min-height: 140px;
     }
-    .header .color-palette li {
-      width: 21px;
-      height: 21px;
-      border-radius: 40px;
-      margin-right: 2.8px;
-    }
-    .color-palette {
-      display: flex;
-      max-width: 100%;
-      padding: 0;
-      margin: 0.5em 0 0 0;
-      list-style: none;
-      flex-wrap: wrap;
-      li {
-        width: 45px;
-        height: 23px;
-        margin-right: 4px;
-        margin-bottom: 10px;
-        display: flex;
-        border-radius: 5px;
-        overflow: hidden;
-        cursor: pointer;
-        position: relative;
-        .click-target {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-        }
-        &.selected {
-          border: rgba(0, 0, 0, 0.8) 2px solid;
-        }
-        span {
-          width: 33.3%;
-        }
-      }
-    }
-
-    fieldset {
-      display: block;
-    }
-
-    .primary-fieldset {
-      padding: 0;
-      margin: 0;
-      border: 0;
-    }
-
-    ul.column-edit {
-      list-style: none;
-      li {
-        margin-top: 1em;
-      }
-      .three-col {
-        display: flex;
-        justify-content: space-between;
-        > label {
-          margin-top: 0;
-          width: 30%;
-          display: inline-block;
-          input[type='text'],
-          input[type='number'] {
-            width: 50px;
-          }
-        }
-      }
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    .emove-column {
-      float: right;
-      text-transform: uppercase;
-      color: #c32b2b;
-      font-size: 0.7em;
-      line-height: 1.6em;
-      border-radius: 5px;
-      margin: 0 auto;
-      transition: 0.1s all;
-      border: 0;
-      text-decoration: underline;
-      outline: 0;
-      cursor: pointer;
-      font-weight: bold;
-    }
-
-    .edit-block {
-      padding-left: 1em;
-      border-left: rgba(0, 0, 0, 0.2) 4px solid;
-      transition: 0.2s all;
-      &:not(:first-child) {
-        margin-top: 2em;
-      }
-      input[type='text'],
-      input[type='number'] {
-        font-size: 1em;
-      }
-      label {
-        margin-top: 0;
-      }
-      label + label {
-        margin-top: 1em;
-      }
-      &:hover {
-        border-left: rgba(0, 0, 0, 0.7) 4px solid;
-        transition: 0.2s all;
-      }
-    }
 
     .data-toggle {
       list-style: none;
@@ -443,167 +168,6 @@
         }
       }
     }
-
-    span.subtext {
-      display: block;
-      color: rgba(0, 0, 0, 0.5);
-      text-transform: none;
-      font-weight: normal;
-    }
-
-    .sort-list {
-      list-style: none;
-      > li {
-        margin-right: 0.3em;
-        margin-bottom: 0.3em;
-      }
-    }
-    .sort-list li > div {
-      display: block;
-      box-sizing: border-box;
-      border: 1px solid #d1d1d1;
-      border-radius: 2px;
-      background: #f1f1f1;
-      padding: 0.4em 0.6em;
-      font-size: 0.8em;
-      margin-bottom: 0.3em;
-      cursor: move;
-      z-index: 999;
-    }
-
-    .info {
-      font-size: 0.8em;
-      line-height: 1.4em;
-      font-style: italic;
-      padding-top: 10px;
-    }
-
-    .react-tags__search {
-      width: 100%;
-    }
-
-    .react-tags {
-      position: relative;
-      input.react-tags__search-input {
-        font-size: 0.8rem;
-      }
-      /* clicking anywhere will focus the input */
-      cursor: text;
-      span {
-        display: inline;
-      }
-    }
-
-    .react-tags.is-focused {
-      border-color: rgba(0, 0, 0, 0.7);
-    }
-
-    .react-tags__selected {
-      display: inline;
-    }
-
-    .react-tags__selected-tag {
-      display: inline-block;
-      box-sizing: border-box;
-      border: 1px solid #d1d1d1;
-      border-radius: 2px;
-      background: #f1f1f1;
-      padding: 0.4em 0.6em;
-      font-size: 0.8em;
-      margin-right: 0.3em;
-      margin-bottom: 0.3em;
-    }
-
-    .react-tags__selected-tag:after {
-      content: '\2715';
-      color: #aaa;
-      margin-left: 8px;
-    }
-
-    .react-tags__selected-tag:hover,
-    .react-tags__selected-tag:focus {
-      border-color: #b1b1b1;
-    }
-
-    .react-tags__search {
-      display: inline-block;
-
-      /* prevent autoresize overflowing the container */
-      max-width: 100%;
-    }
-
-    @media screen and (min-width: 30em) {
-      .react-tags__search {
-        /* this will become the offsetParent for suggestions */
-        position: relative;
-      }
-    }
-
-    .react-tags__search input {
-      /* prevent autoresize overflowing the container */
-      max-width: 100%;
-
-      /* emove styles and layout from this element */
-      margin: 0;
-      outline: none;
-      padding: 0.5em 0.3em;
-
-      /* match the font styles */
-      font-size: inherit;
-      line-height: inherit;
-    }
-
-    .react-tags__search input::-ms-clear {
-      display: none;
-    }
-
-    .react-tags__suggestions {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      width: 100%;
-    }
-
-    @media screen and (min-width: 30em) {
-      .react-tags__suggestions {
-        width: 240px;
-      }
-    }
-
-    .react-tags__suggestions ul {
-      margin: 4px -1px;
-      padding: 0;
-      list-style: none;
-      background: white;
-      border: 1px solid #d1d1d1;
-      border-radius: 2px;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-    }
-
-    .react-tags__suggestions li {
-      border-bottom: 1px solid #ddd;
-      padding: 6px 8px;
-    }
-
-    .react-tags__suggestions li mark {
-      text-decoration: underline;
-      background: none;
-      font-weight: 600;
-    }
-
-    .react-tags__suggestions li:hover {
-      cursor: pointer;
-      background: #eee;
-    }
-
-    .react-tags__suggestions li.is-active {
-      background: #b7cfe0;
-    }
-
-    .react-tags__suggestions li.is-disabled {
-      opacity: 0.5;
-      cursor: auto;
-    }
   }
 
   @include breakpointClass(md) {

package/src/scss/main.scss

@@ -1,4 +1,4 @@
-@import 'mixins';
+@import '@cdc/core/styles/v2/utils/breakpoints';
 @import 'editor-panel';
 @import '@cdc/core/styles/accessibility';
 

package/src/scss/map.scss

@@ -33,25 +33,28 @@ $medium: 768px;
   &:focus {
     outline: 0;
   }
+
+  // Multi-country map states - use higher specificity
+  &.hidden {
+    display: none !important;
+  }
+
+  &.grayed-out {
+    opacity: 0.3;
+    fill: #d3d3d3 !important;
+  }
 }
 
 .territories-label {
-  font-size: 0.8rem;
   font-weight: 700;
 }
 
-@include breakpointClass(sm) {
-  .territories-label {
-    font-size: 1rem;
-  }
-}
-
 // Cities and Territories
 .territories {
   gap: 0.5em;
   svg {
-    max-width: 30px;
-    min-width: 30px;
+    max-width: var(--territory-svg-max-width, 30px);
+    min-width: var(--territory-svg-min-width, 30px);
     transition: 0.3s all;
 
     text {
@@ -73,11 +76,6 @@ $medium: 768px;
       width: 2.5em;
     }
   }
-  .territories {
-    svg {
-      max-width: 45px;
-    }
-  }
 }
 
 .state {
@@ -98,7 +96,6 @@ $medium: 768px;
   display: none;
 }
 
-
 .county-borders {
   fill: none;
   stroke-width: 1px;

package/src/store/map.actions.ts

@@ -1,9 +1,9 @@
-import { MapConfig, Coordinate } from '../types/MapConfig'
-import { GeneratedLegend } from '../hooks/useGenerateRuntimeLegend'
-import { VizFilter } from '@cdc/core/types/VizFilter'
+import { type MapConfig, type Coordinate } from '../types/MapConfig'
+import { type RuntimeLegend } from '../types/runtimeLegend'
+import { type VizFilter } from '@cdc/core/types/VizFilter'
 import { type Action } from '@cdc/core/types/Action'
-import { RuntimeData } from '../types/RuntimeData'
-import { Modal } from '../types/Modal'
+import { type RuntimeData } from '../types/RuntimeData'
+import { type Modal } from '../types/Modal'
 
 // Action Types
 type SET_ACCESSIBLE_STATUS = Action<'SET_ACCESSIBLE_STATUS', string>
@@ -18,13 +18,13 @@ type SET_POSITION = Action<'SET_POSITION', { coordinates: Coordinate; zoom: numb
 type SET_REQUIRED_COLUMNS = Action<'SET_REQUIRED_COLUMNS', string[]>
 type SET_RUNTIME_DATA = Action<'SET_RUNTIME_DATA', RuntimeData>
 type SET_RUNTIME_FILTERS = Action<'SET_RUNTIME_FILTERS', VizFilter[]>
-type SET_RUNTIME_LEGEND = Action<'SET_RUNTIME_LEGEND', GeneratedLegend | []>
+type SET_RUNTIME_LEGEND = Action<'SET_RUNTIME_LEGEND', RuntimeLegend | []>
 type SET_SCALE = Action<'SET_SCALE', number>
 type SET_STATES_TO_SHOW = Action<'SET_STATES_TO_SHOW', string[]>
 type SET_TOPO_DATA = Action<'SET_TOPO_DATA', any>
 type SET_TRANSLATE = Action<'SET_TRANSLATE', [number, number]>
 
-export type MapActions =
+type MapActions =
   | SET_ACCESSIBLE_STATUS
   | SET_CONFIG
   | SET_COVE_LOADED_HAS_RAN

package/src/test/CdcMap.test.jsx

@@ -7,5 +7,5 @@ describe('Map', () => {
     const pkgDir = path.join(__dirname, '..')
     const result = testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
-  })
+  }, 300000)
 })