@cdc/core 4.25.10 → 4.25.11

package/helpers/parseCsvWithQuotes.ts

@@ -0,0 +1,65 @@
+import Papa from 'papaparse'
+
+/**
+ * Parses CSV text while preserving newlines and commas within quoted fields.
+ * 
+ * @param responseText - The raw CSV text to parse
+ * @param options - Parsing options
+ * @param options.delimiter - The delimiter to use after processing (default: '|')
+ * @param options.dynamicTyping - Whether to automatically convert types (default: false)
+ * @returns Parsed CSV data as an array of objects
+ */
+export function parseCsvWithQuotes(
+  responseText: string,
+  options: {
+    delimiter?: string
+    dynamicTyping?: boolean
+  } = {}
+): any[] {
+  const { delimiter = '|', dynamicTyping = false } = options
+  
+  const NEWLINE_PLACEHOLDER = '__COVE_NEWLINE__'
+  
+  // Preserve newlines in quoted fields by replacing with placeholder
+  const quotedFields: string[] = []
+  let placeholderIndex = 0
+  let sanitizedText = responseText.replace(/("(?:[^"\\]|\\.|[\s\S])*?")/g, (match) => {
+    const preserved = match.replace(/\n/g, NEWLINE_PLACEHOLDER)
+    quotedFields.push(preserved)
+    return `__QUOTED_FIELD_${placeholderIndex++}__`
+  })
+  
+  // Replace commas outside quoted fields with pipe delimiter
+  sanitizedText = sanitizedText.replace(/(__QUOTED_FIELD_\d+__)|,/g, (...m) => m[1] || delimiter)
+  
+  // Restore quoted fields without outer quotes
+  quotedFields.forEach((field, index) => {
+    const unquoted = field.slice(1, -1).replace(new RegExp(NEWLINE_PLACEHOLDER, 'g'), '\n')
+    sanitizedText = sanitizedText.replace(`__QUOTED_FIELD_${index}__`, unquoted)
+  })
+  
+  // Parse with Papa.parse
+  const parsedCsv = Papa.parse(sanitizedText, {
+    header: true,
+    skipEmptyLines: true,
+    delimiter,
+    dynamicTyping
+  })
+  
+  // Restore newlines in parsed data
+  const restoredData = parsedCsv.data.map((row: any) => {
+    const restoredRow: any = {}
+    Object.keys(row).forEach(key => {
+      const value = row[key]
+      if (typeof value === 'string') {
+        restoredRow[key] = value.replace(new RegExp(NEWLINE_PLACEHOLDER, 'g'), '\n')
+      } else {
+        restoredRow[key] = value
+      }
+    })
+    return restoredRow
+  })
+  
+  return restoredData
+}
+

package/helpers/testing.ts

@@ -39,7 +39,7 @@ export const MIN_ANIMATION_DELAY_MS = (() => {
   return 500
 })()
 
-const WAIT_FOR_TIMEOUT_MS = 5000
+const WAIT_FOR_TIMEOUT_MS = 10000
 
 // ============================================================================
 // CORE POLLING UTILITIES
@@ -177,8 +177,11 @@ export const waitForTextContent = async (el: HTMLElement | null, expected: strin
  */
 export const waitForEditor = async (canvas: any) => {
   await waitForWithDelay(() => {
-    const editorElement = canvas.queryAllByText(/general|data|visual/i)
-    expect(editorElement[0]).toBeVisible()
+    const accordionButtons = canvas.getAllByRole('button', { name: /general|data|visual/i })
+    expect(accordionButtons.length).toBeGreaterThan(0)
+    for (const button of accordionButtons) {
+      expect(button).toBeVisible()
+    }
   })
 }
 
@@ -189,7 +192,17 @@ export const waitForEditor = async (canvas: any) => {
  * @param sectionName Name of the accordion section (case-insensitive)
  */
 export const openAccordion = async (canvas: any, sectionName: string) => {
-  const accordion = canvas.getByRole('button', { name: new RegExp(sectionName, 'i') })
+  // Get all buttons with matching name and filter to only accordion buttons
+  const allButtons = canvas.getAllByRole('button', { name: new RegExp(sectionName, 'i') })
+  const accordion = allButtons.find(
+    (button: HTMLElement) =>
+      button.classList.contains('accordion__button') || button.closest('.editor-panel, .accordion')
+  )
+
+  if (!accordion) {
+    throw new Error(`Could not find accordion button for "${sectionName}"`)
+  }
+
   await userEvent.click(accordion)
   await waitForWithDelay(() => {
     const accordionContent = accordion.closest('.accordion-item, .accordion-section, [class*="accordion"]')

package/helpers/ver/4.25.11.ts

@@ -0,0 +1,13 @@
+import cloneConfig from '../cloneConfig'
+
+const update_4_25_11 = config => {
+  const ver = '4.25.11'
+  const newConfig = cloneConfig(config)
+  // No config transformations needed - this is a runtime behavior fix
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_25_11
+
+

package/helpers/viewports.ts

@@ -14,3 +14,5 @@ export const isMobileStateLabelViewport = currentViewport => isBelowBreakpoint('
 export const isMobileTerritoryViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
 
 export const isMobileFontViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
+
+export const isMobileSmallMultiplesViewport = currentViewport => isBelowBreakpoint('md', currentViewport)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.25.10",
+  "version": "4.25.11",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -24,6 +24,7 @@
   "dependencies": {
     "chroma-js": "3.1.2",
     "dompurify": "^3.2.4",
+    "html-react-parser": "5.2.3",
     "html2canvas": "^1.4.1",
     "json-edit-react": "^1.27.0",
     "papaparse": "5.5.2",
@@ -40,12 +41,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d",
+  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd",
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "sass": "^1.89.2",
-    "vite": "^4.4.11",
+    "vite": "^5.4.21",
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^2.4.0"
   }

package/styles/_common-components.css

@@ -0,0 +1,73 @@
+/* Common component styles shared across packages */
+/* This file combines loader, warning-icon, and checkbox-group styles */
+
+/* Shared loader component */
+/* Used across: chart, dashboard, data-bite, waffle-chart packages */
+.loader {
+  width: 100%;
+  text-align: center;
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+.loader::before {
+  content: '\21BB';
+}
+
+/* Shared warning icon component */
+/* TODO: Currently different panel classes on different packages */
+.accordion__button svg.warning-icon,
+.cove-accordion__button svg.warning-icon {
+  position: absolute;
+  right: 35px;
+  left: auto;
+  top: 50%;
+  transform: translateY(-50%);
+
+}
+
+.warning-icon {
+  color: #d72f00;
+  width: 15px;
+  height: 15px;
+}
+
+.warning-icon path {
+  fill: #d8000c;
+}
+
+/* Shared checkbox group component */
+/* Used across: chart, data-bite, markup-include packages */
+.checkbox-group {
+  padding: 16px;
+  border: 1px solid #c4c4c4;
+  border-radius: 8px;
+  margin-top: 8px;
+  margin-bottom: 24px;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox,
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox,
+.panel-visual .checkbox-group label.checkbox,
+.panel-visual .reverse-labels label.checkbox {
+  display: flex !important;
+  align-items: center !important;
+  width: 100% !important;
+  margin-bottom: 8px !important;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox input[type="checkbox"],
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox input[type="checkbox"],
+.panel-visual .checkbox-group label.checkbox input[type="checkbox"],
+.panel-visual .reverse-labels label.checkbox input[type="checkbox"] {
+  flex-shrink: 0 !important;
+  margin-right: 8px !important;
+}
+
+.cove-accordion__panel.panel-visual .checkbox-group label.checkbox span,
+.cove-accordion__panel.panel-visual .reverse-labels label.checkbox span,
+.panel-visual .checkbox-group label.checkbox span,
+.panel-visual .reverse-labels label.checkbox span {
+  flex: 1 !important;
+  display: inline-block !important;
+}

package/styles/_global.scss

@@ -10,12 +10,15 @@ strong {
   justify-content: space-between;
   padding: 0.3rem 1rem;
   font-size: 0.9rem;
+
   strong {
     font-weight: 600;
   }
+
   p {
     margin: 0;
   }
+
   .dismiss-error {
     flex-shrink: 0;
     font-size: 0.8rem;
@@ -36,19 +39,23 @@ strong {
   border: 0 !important;
   display: flex;
 }
+
 .cdcdataviz-sr-only-focusable:focus {
   width: fit-content;
   margin-bottom: 0.5em;
   margin-left: 1em;
 }
+
 .inline-icon {
   width: 1em !important;
   height: auto !important;
   font-size: 1rem;
   color: inherit;
+
   @media all and (-ms-high-contrast: none) {
     height: 30px !important;
   }
+
   path {
     fill: currentColor;
   }
@@ -58,25 +65,30 @@ strong {
   &.full-width {
     width: 100%;
   }
+
   &:hover {
     transition: 0.1s background-color;
   }
+
   &.secondary {
     font-size: 0.8em;
     padding: 0.3em 1em;
     background: rgba(0, 0, 0, 0.3);
     display: inline-block;
     margin-bottom: 1em;
+
     &:hover {
       background: rgba(0, 0, 0, 0.5);
     }
   }
+
   &.danger {
     background-color: $red;
     padding: 0em 0.6em 0em;
     height: 1.6em;
     font-size: 0.8 em;
     color: #fff;
+
     &:hover {
       background-color: color.adjust($red, $lightness: -5%);
     }
@@ -101,6 +113,7 @@ textarea {
   font-weight: normal;
   font-family: sans-serif;
   border: rgba(0, 0, 0, 0.3) 1px solid !important;
+
   &:focus {
     border: rgba(0, 0, 0, 0.7) 1px solid !important;
     outline: 0;
@@ -122,6 +135,7 @@ textarea {
   position: relative;
   transition: 0.2s all;
   font-size: 1em;
+
   &:before {
     content: ' ';
     width: 5px;
@@ -131,22 +145,27 @@ textarea {
     bottom: -1px;
     position: absolute;
   }
+
   &:hover {
     background: $lightestGray;
     transition: 0.2s all;
     color: #444;
   }
-  > div {
+
+  >div {
     font-size: 0.9em;
   }
+
   svg {
     width: 60px;
     color: $blue;
     margin-right: 1rem;
+
     path {
       fill: currentColor;
     }
   }
+
   h3 {
     font-weight: 600;
     font-size: 1.2rem;
@@ -169,6 +188,7 @@ section.footnotes {
 .btn.btn-primary:not([disabled]) {
   background-color: $blue;
   border-color: $blue;
+
   &:hover:not([disabled]) {
     background-color: color.adjust($blue, $lightness: -5%);
     border-color: color.adjust($blue, $lightness: -5%);
@@ -177,15 +197,15 @@ section.footnotes {
 
 // after migration to TP5 this declaration should be removed and all references
 // to it should be replaced with .form-select
-.cove-form-select {
+select.cove-form-select {
   font-family: var(--app-font-secondary);
   font-weight: 300;
   font-size: var(--filter-select-font-size);
   line-height: normal;
   padding-right: 3rem;
   border-radius: 0.333rem;
-  border: 1px solid var(--colors-gray-cool-10);
-  color: var(--colors-primary-text);
+  border: 1px solid var(--cool-gray-10) !important;
+  color: var(--cool-gray-90);
   // recreate caret using svg
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
   background-repeat: no-repeat;
@@ -195,4 +215,4 @@ section.footnotes {
   -webkit-appearance: none;
   -moz-appearance: none;
   cursor: pointer;
-}
+}

package/styles/base.scss

@@ -1,58 +1,9 @@
 @use 'sass:string';
 
-@mixin breakpoint($class) {
-  @if $class == xs {
-    @media (max-width: 767px) {
-      @content;
-    }
-  } @else if $class == sm {
-    @media (min-width: 768px) {
-      @content;
-    }
-  } @else if $class == md {
-    @media (min-width: 960px) {
-      @content;
-    }
-  } @else if $class == lg {
-    @media (min-width: 1300px) {
-      @content;
-    }
-  } @else {
-    @warn "Breakpoint mixin supports: xs, sm, md, lg";
-  }
-}
-
-@mixin breakpointClass($class) {
-  @if $class == xs {
-    &.xs,
-    &.xxs {
-      @content;
-    }
-  } @else if $class == sm {
-    &.sm,
-    &.md,
-    &.lg {
-      @content;
-    }
-  } @else if $class == md {
-    &.md,
-    &.lg {
-      @content;
-    }
-  } @else if $class == lg {
-    &.lg {
-      @content;
-    }
-  } @else {
-    @warn "Breakpoint Class mixin supports: xs, sm, md, lg";
-  }
-}
-
 // Imports
 @import 'reset';
 @import 'variables';
 @import 'global-variables';
-@import 'mixins';
 @import 'filters';
 
 body.post-type-cdc_visualization .visx-tooltip {
@@ -74,7 +25,6 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   @import 'global';
   @import 'button-section';
   @import 'series-list';
-  @import 'typography';
 
   input[type='range'] {
     appearance: auto !important;

package/styles/cove-main.scss

@@ -1,6 +1,8 @@
+@import 'v2/utils/breakpoints';
 @import 'base';
 @import 'heading-colors';
 @import 'v2/themes/color-definitions';
 @import 'variables';
+@import '_common-components';
 @import 'v2/components/ui/tooltip';
-@import 'v2/main.scss';
+@import 'v2/main.scss';

package/styles/filters.scss

@@ -1,9 +1,12 @@
+@import 'v2/utils/breakpoints';
+
 .filters-section {
   &__wrapper {
     flex-wrap: wrap;
     display: flex;
     gap: 1rem 1.5rem;
     margin-bottom: 2rem;
+
     label {
       display: inherit;
       margin-bottom: 5px;
@@ -35,8 +38,9 @@ div.single-filters {
       border-bottom-left-radius: 15px;
     }
   }
-  & > select.cove-form-select,
-  & > div.nested-dropdown {
+
+  &>select.cove-form-select,
+  &>div.nested-dropdown {
     width: fit-content;
   }
 }
@@ -89,6 +93,7 @@ div.single-filters {
       color: var(--colors-blue-vivid-60, #005ea2);
       background: var(--colors-cyan-cool-10, #eff9fa);
     }
+
     // TODO - focus styles have to be heavy handed to override the project's global styles
     &:focus:not(:focus-visible) {
       outline: none !important;
@@ -101,6 +106,7 @@ div.single-filters {
     }
   }
 }
+
 .cdc-open-viz-module {
   @include breakpointClass(xs) {
     .single-filters--tab-simple .tab-simple-container .tab.tab--simple {
@@ -147,9 +153,10 @@ div.single-filters {
     padding: 10px;
     background: none;
     transition: background 2s;
+
     &--active {
       background: #fff;
       border-radius: 15px;
     }
   }
-}
+}

package/styles/v2/base/index.scss

@@ -1,5 +1,4 @@
 // @import 'reset'; //TODO: Enable after cove refactor
-@import 'typography';
 
 @import 'general';
 @import 'heading';

package/styles/v2/components/editor.scss

@@ -1,5 +1,7 @@
 @import '../utils/variables';
 @import '../themes/index';
+@import '../../../components/HeaderThemeSelector/HeaderThemeSelector.css';
+@import '../../_common-components';
 
 .cove-editor {
   display: grid;
@@ -91,7 +93,7 @@
     margin-top: 1em;
     justify-content: space-between;
 
-    > label {
+    >label {
       width: 48%;
       margin-top: 0 !important;
     }
@@ -128,7 +130,7 @@
         cursor: pointer;
       }
 
-      + li {
+      +li {
         border-top: $lightGray 1px solid;
       }
     }
@@ -148,6 +150,7 @@
       color: $blue;
       margin-right: 1rem;
       height: 60px; // IE11
+
       path {
         fill: currentColor;
       }
@@ -186,7 +189,7 @@
       display: flex;
       justify-content: space-between;
 
-      > label {
+      >label {
         margin-top: 0;
         width: 30%;
         display: inline-block;
@@ -234,7 +237,7 @@
       margin-top: 0;
     }
 
-    label + label {
+    label+label {
       margin-top: 1em;
     }
 
@@ -254,12 +257,12 @@
   .sort-list {
     list-style: none;
 
-    > li {
+    >li {
       margin-right: 0.3em;
       margin-bottom: 0.3em;
     }
 
-    li > div {
+    li>div {
       display: block;
       box-sizing: border-box;
       border: 1px solid #d1d1d1;
@@ -484,3 +487,8 @@ ul.color-palette {
     }
   }
 }
+
+// CheckBox component styling for EditorPanel/Inputs
+.edit-checkbox {
+  margin-right: 8px;
+}

package/styles/v2/utils/_breakpoints.scss

@@ -13,7 +13,7 @@
       @content;
     }
   } @else if $class == lg {
-    @media (min-width: 1170px) {
+    @media (min-width: 1300px) {
       @content;
     }
   } @else if $class == xl {

package/styles/v2/utils/index.scss

@@ -4,5 +4,4 @@
 @import 'align';
 @import 'animations';
 @import 'breakpoints';
-@import 'functions';
 @import 'grid';

package/styles/waiting.scss

@@ -1,5 +1,5 @@
 .cdc-open-viz-module {
-  @import 'mixins';
+  @import 'v2/utils/mixins';
   .waiting {
     &.collapsed {
       padding: 2em !important;

package/types/MarkupInclude.ts

@@ -1,5 +1,5 @@
 import { Runtime } from '@cdc/core/types/Runtime'
-import { Variable } from '@cdc/markup-include/src/types/Variable'
+import { MarkupVariable } from './MarkupVariable'
 import { Visualization } from './Visualization'
 import { VizFilter } from './VizFilter'
 
@@ -8,7 +8,7 @@ export type MarkupIncludeConfig = Visualization & {
     // Changing the base config object creates an infinite loop, nesting it is a workaround
     allowHideSection?: boolean
     inlineHTML: string
-    markupVariables?: Variable[]
+    markupVariables?: MarkupVariable[]
     showHeader: boolean
     showNoDataMessage?: boolean
     noDataMessageText?: string
@@ -17,9 +17,10 @@ export type MarkupIncludeConfig = Visualization & {
     useInlineHTML: boolean
   }
   data?: Object[]
+  enableMarkupVariables?: boolean
   filters?: VizFilter[]
   formattedData: {}
-  markupVariables?: Variable[] // Support markupVariables at root level for backwards compatibility
+  markupVariables?: MarkupVariable[] // Support markupVariables at root level for backwards compatibility
   newViz?: boolean
   runtime?: Runtime
   visual: {

package/types/MarkupVariable.ts

@@ -16,4 +16,4 @@ export type MarkupVariable = {
 export type MarkupConfig = {
   markupVariables?: MarkupVariable[]
   enableMarkupVariables?: boolean
-}
+}

package/types/VizFilter.ts

@@ -23,6 +23,7 @@ export type GeneralFilter = FilterBase & {
   queuedActive: string | string[]
   filterStyle: VizFilterStyle
   label: string
+  labels?: Record<string, string>
   order: OrderBy
   orderColumn?: string
   orderedValues?: string[] // should only exist if the order is 'cust'

package/styles/_mixins.scss

@@ -1,13 +0,0 @@
-@mixin emptyState {
-  background: rgba(255, 255, 255, 0.5);
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 7;
-}