@cdc/core 4.25.11 → 4.26.2

package/hooks/useListManagement.ts

@@ -0,0 +1,192 @@
+import { useCallback } from 'react'
+
+export interface UseListManagementOptions<TItem> {
+  /** Config object containing the list */
+  config: any
+  /** Function to update entire config */
+  updateConfig: (config: any) => void
+  /** Path to the list in config (e.g., 'items' or 'imageData.options') */
+  listPath: string
+  /** Factory function to create new items */
+  createItem: () => TItem
+}
+
+/**
+ * Hook for managing dynamic lists in EditorPanel configs
+ *
+ * Standardizes add/remove/update operations for dynamic arrays,
+ * eliminating the need for repetitive boilerplate code.
+ *
+ * @example
+ * // Basic usage
+ * const { items, add, remove, update } = useListManagement({
+ *   config,
+ *   updateConfig,
+ *   listPath: 'imageData.options',
+ *   createItem: () => ({ source: '', alt: '' })
+ * })
+ *
+ * @example
+ * // Usage in render
+ * {items.map((image, index) => (
+ *   <div key={index}>
+ *     <button onClick={() => remove(index)}>Remove</button>
+ *     <input
+ *       value={image.source}
+ *       onChange={e => updateField(index, 'source', e.target.value)}
+ *     />
+ *   </div>
+ * ))}
+ * <button onClick={add}>Add Image</button>
+ */
+export const useListManagement = <TItem = any>({
+  config,
+  updateConfig,
+  listPath,
+  createItem
+}: UseListManagementOptions<TItem>) => {
+  /**
+   * Parse nested path (e.g., 'imageData.options' → config.imageData.options)
+   */
+  const getList = useCallback((): TItem[] => {
+    const parts = listPath.split('.')
+    let current = config
+    for (const part of parts) {
+      current = current?.[part]
+    }
+    return current || []
+  }, [config, listPath])
+
+  /**
+   * Update list at nested path
+   */
+  const setList = useCallback(
+    (newList: TItem[]) => {
+      const parts = listPath.split('.')
+      if (parts.length === 1) {
+        // Simple top-level path
+        updateConfig({ ...config, [parts[0]]: newList })
+      } else {
+        // Nested path - need to reconstruct nested structure
+        const updated = { ...config }
+        let current = updated
+        for (let i = 0; i < parts.length - 1; i++) {
+          current[parts[i]] = { ...current[parts[i]] }
+          current = current[parts[i]]
+        }
+        current[parts[parts.length - 1]] = newList
+        updateConfig(updated)
+      }
+    },
+    [config, updateConfig, listPath]
+  )
+
+  /**
+   * Add a new item to the list
+   */
+  const add = useCallback(() => {
+    const list = getList()
+    setList([...list, createItem()])
+  }, [getList, setList, createItem])
+
+  /**
+   * Remove an item at the specified index
+   */
+  const remove = useCallback(
+    (index: number) => {
+      const list = getList()
+      setList(list.filter((_, i) => i !== index))
+    },
+    [getList, setList]
+  )
+
+  /**
+   * Update an item with partial changes
+   */
+  const update = useCallback(
+    (index: number, partial: Partial<TItem>) => {
+      const list = getList()
+      const updated = [...list]
+      updated[index] = { ...updated[index], ...partial }
+      setList(updated)
+    },
+    [getList, setList]
+  )
+
+  /**
+   * Update a specific field of an item
+   */
+  const updateField = useCallback(
+    (index: number, field: keyof TItem, value: any) => {
+      const list = getList()
+      const updated = [...list]
+      updated[index] = { ...updated[index], [field]: value }
+      setList(updated)
+    },
+    [getList, setList]
+  )
+
+  /**
+   * Update a nested field within an array field
+   * Useful for imageData.options[i].arguments[j].threshold patterns
+   */
+  const updateNested = useCallback(
+    (index: number, field: keyof TItem, nestedIndex: number, nestedField: string, value: any) => {
+      const list = getList()
+      const updated = [...list]
+      const item = { ...updated[index] }
+      const nestedArray = [...(item[field] as any)]
+      nestedArray[nestedIndex] = { ...nestedArray[nestedIndex], [nestedField]: value }
+      item[field] = nestedArray as any
+      updated[index] = item
+      setList(updated)
+    },
+    [getList, setList]
+  )
+
+  /**
+   * Replace entire item at index
+   */
+  const replace = useCallback(
+    (index: number, item: TItem) => {
+      const list = getList()
+      const updated = [...list]
+      updated[index] = item
+      setList(updated)
+    },
+    [getList, setList]
+  )
+
+  /**
+   * Move an item from one index to another (for drag-and-drop)
+   */
+  const move = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      const list = getList()
+      const updated = [...list]
+      const [removed] = updated.splice(fromIndex, 1)
+      updated.splice(toIndex, 0, removed)
+      setList(updated)
+    },
+    [getList, setList]
+  )
+
+  return {
+    /** Current list items */
+    items: getList(),
+    /** Add a new item to the end of the list */
+    add,
+    /** Remove an item at index */
+    remove,
+    /** Update item with partial changes */
+    update,
+    /** Update a specific field of an item */
+    updateField,
+    /** Update nested array field (e.g., item.arguments[i].threshold) */
+    updateNested,
+    /** Replace entire item at index */
+    replace,
+    /** Move item from one index to another */
+    move
+  }
+}

package/package.json

@@ -1,53 +1,49 @@
 {
   "name": "@cdc/core",
-  "version": "4.25.11",
+  "version": "4.26.2",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
-  "moduleName": "CdcCore",
-  "main": "dist/cdccore",
-  "type": "module",
-  "scripts": {
-    "test": "vitest run --environment jsdom --reporter verbose",
-    "test-watch": "vitest watch --reporter verbose",
-    "test-watch:ui": "vitest --ui",
-    "build": "sass styles/cove-main.scss dist/cove-main.css"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/CDCgov/cdc-open-viz.git"
-  },
-  "author": "Rob Shelnutt <rob@blackairplane.com>",
-  "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
-  "bugs": {
-    "url": "https://github.com/CDCgov/cdc-open-viz/issues"
-  },
   "license": "Apache-2.0",
+  "author": "Rob Shelnutt <rob@blackairplane.com>",
+  "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "chroma-js": "3.1.2",
-    "dompurify": "^3.2.4",
-    "html-react-parser": "5.2.3",
+    "@hello-pangea/dnd": "^16.2.0",
+    "chroma-js": "^3.1.2",
+    "dompurify": "^3.3.1",
+    "html-react-parser": "^5.2.3",
     "html2canvas": "^1.4.1",
     "json-edit-react": "^1.27.0",
-    "papaparse": "5.5.2",
+    "papaparse": "^5.5.2",
     "prop-types": "^15.8.1",
     "react-accessible-accordion": "^5.0.1",
     "react-select": "^5.3.1",
     "react-tooltip": "5.8.2-beta.3",
     "resize-observer-polyfill": "^1.5.1",
-    "use-debounce": "^10.0.5",
+    "use-debounce": "^10.1.0",
     "vega": "^6.1.0",
     "vega-lite": "^6.1.0"
   },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd",
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^5.1.2",
     "sass": "^1.89.2",
-    "vite": "^5.4.21",
+    "vite": "^7.3.1",
     "vite-plugin-css-injected-by-js": "^2.4.0",
-    "vite-plugin-svgr": "^2.4.0"
-  }
+    "vite-plugin-svgr": "^4.2.0"
+  },
+  "gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
+  "main": "dist/cdccore",
+  "moduleName": "CdcCore",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "repository": "CDCgov/cdc-open-viz.git",
+  "scripts": {
+    "build": "sass styles/cove-main.scss dist/cove-main.css",
+    "test": "vitest run --environment jsdom --reporter verbose",
+    "test-watch": "vitest watch --reporter verbose",
+    "test-watch:ui": "vitest --ui"
+  },
+  "type": "module"
 }

package/styles/_button-section.scss

@@ -16,9 +16,6 @@
 .download-links {
   justify-content: flex-end;
   line-height: 1;
-  &.brush-active {
-    margin-top: 2em;
-  }
   a:not(:last-child) {
     margin-right: 10px;
   }

package/styles/v2/components/editor.scss

@@ -93,7 +93,7 @@
     margin-top: 1em;
     justify-content: space-between;
 
-    >label {
+    > label {
       width: 48%;
       margin-top: 0 !important;
     }
@@ -130,7 +130,7 @@
         cursor: pointer;
       }
 
-      +li {
+      + li {
         border-top: $lightGray 1px solid;
       }
     }
@@ -189,7 +189,7 @@
       display: flex;
       justify-content: space-between;
 
-      >label {
+      > label {
         margin-top: 0;
         width: 30%;
         display: inline-block;
@@ -237,7 +237,7 @@
       margin-top: 0;
     }
 
-    label+label {
+    label + label {
       margin-top: 1em;
     }
 
@@ -256,13 +256,13 @@
 
   .sort-list {
     list-style: none;
+    padding: 0;
 
-    >li {
-      margin-right: 0.3em;
+    > li {
       margin-bottom: 0.3em;
     }
 
-    li>div {
+    li > div {
       display: block;
       box-sizing: border-box;
       border: 1px solid #d1d1d1;
@@ -270,8 +270,8 @@
       background: #f1f1f1;
       padding: 0.4em 0.6em;
       font-size: 0.8em;
-      margin-bottom: 0.3em;
       cursor: move;
+      width: 100%;
     }
   }
 
@@ -491,4 +491,4 @@ ul.color-palette {
 // CheckBox component styling for EditorPanel/Inputs
 .edit-checkbox {
   margin-right: 8px;
-}
+}

package/styles/v2/utils/_grid.scss

@@ -3,18 +3,21 @@ $grid-gap-max: 64;
 $grid-columns: 12;
 
 @mixin create-grid-selectors($breakpoint: null) {
-  $infix: if($breakpoint == null, '', '-#{$breakpoint}');
+  $infix: if(sass($breakpoint ==null): ""; else: "-#{$breakpoint}");
 
   @for $i from 1 through $grid-columns {
     .col#{$infix}-#{$i} {
       grid-column-end: span $i;
     }
+
     .col-offset#{$infix}-#{$i} {
       grid-column-start: $i + 1;
     }
+
     .row#{$infix}-#{$i} {
       grid-row-end: span $i;
     }
+
     .row-offset#{$infix}-#{$i} {
       grid-row-start: $i + 1;
     }
@@ -23,11 +26,13 @@ $grid-columns: 12;
 
 @mixin grid-gaps() {
   $i: 0;
-  @while ($i * $grid-gap-offset) <= $grid-gap-max {
+
+  @while ($i * $grid-gap-offset) <=$grid-gap-max {
     .grid-gap-#{$i} {
       grid-gap: #{($i * $grid-gap-offset) + 'px'};
       gap: #{($i * $grid-gap-offset) + 'px'};
     }
+
     $i: $i + 1;
   }
 }
@@ -44,4 +49,4 @@ $grid-columns: 12;
   @media (min-width: $width) {
     @include create-grid-selectors($breakpoint);
   }
-}
+}

package/types/Annotation.ts

@@ -1,4 +1,7 @@
 export type Annotation = {
+  // Positioning mode: fixed uses x/y percentages, data anchors to data point
+  anchorMode?: 'fixed' | 'data'
+
   // background opacity of annotation
   opacity: number
   // HTML text string to display in annotation
@@ -15,26 +18,22 @@ export type Annotation = {
     horizontal: boolean
     vertical: boolean
   }
-  // x value for scaling
-  xKey: string
-  // y value for scaling
-  yKey: string
-  // orignal x value of subject
-  originalX: number
-  // x of subject
+  // Data X value for data-anchored mode (timestamp, category, etc.)
+  dataX?: any
+  // x of subject (percentage 0-100)
   x: number
-  // y of object
+  // y of object (percentage 0-100)
   y: number
   // x offset of label from subject
   dx: number
   // y offset of label from subject
   dy: number
   // assigned series that the annotation should snap to
-  seriesKey: string
-  // if the dragged item should be snapped to the nearest point
-  snapToNearestPoint: boolean
+  seriesKey?: string
   // type of  connecting line from label to subject
   connectionType: 'line' | 'curve' | 'elbow' | 'none'
+  // curve control point offset for curve connection type
+  bezier?: number
   // marker type highlighting the subject
   marker: 'arrow' | 'circle'
   // should the item be snapped to the subject?

package/types/Axis.ts

@@ -52,4 +52,5 @@ export type Axis = {
   maxValue: string
   sortByRecentDate: boolean
   brushActive: boolean
+  brushDefaultRecentDateCount?: number
 }

package/types/ForecastingSeriesKey.ts

@@ -6,6 +6,7 @@ export type ForecastingSeriesKey = {
   confidenceIntervals: {
     high: string
     low: string
+    showInTooltip?: boolean
   }[]
   stageColumn: string
   stages: {

package/types/General.ts

@@ -1,4 +1,5 @@
 import { BoxPlot } from './BoxPlot'
+import { Palette } from './Palette'
 
 export type General = {
   boxplot: BoxPlot
@@ -12,4 +13,5 @@ export type General = {
   hideNullValue: boolean
   title: string
   annotationDropdownText?: string
+  palette?: Palette
 }

package/types/MarkupInclude.ts

@@ -14,6 +14,7 @@ export type MarkupIncludeConfig = Visualization & {
     noDataMessageText?: string
     srcUrl: string
     title: string
+    titleStyle?: 'legacy' | 'large' | 'small'
     useInlineHTML: boolean
   }
   data?: Object[]

package/types/Palette.ts

@@ -0,0 +1,21 @@
+export type PaletteVersion = '1.0' | '2.0'
+
+export type PaletteBackup = {
+  name: string
+  type?: 'twoColor' | 'primary'
+  version?: PaletteVersion
+  isReversed?: boolean
+}
+
+export type Palette = {
+  name?: string
+  customColors?: string[]
+  version?: PaletteVersion
+  isReversed?: boolean
+  backups?: PaletteBackup[]
+}
+
+export type TwoColorConfig = {
+  palette?: string
+  isPaletteReversed?: boolean
+}

package/types/Series.ts

@@ -8,5 +8,8 @@ export type Series = {
   confidenceIntervals?: {
     high: string
     low: string
+    showInTooltip?: boolean
   }[]
+  stageColumn?: string
+  originalDataKey?: string
 }[]

package/types/Table.ts

@@ -17,6 +17,7 @@ export type Table = {
   expanded?: boolean
   groupBy?: string
   height?: number
+  includeContextInDownload?: boolean
   indexLabel?: string
   label?: string
   limitHeight?: boolean

package/types/Visualization.ts

@@ -11,6 +11,7 @@ import { General } from './General'
 import { Runtime } from './Runtime'
 import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
 import Footnotes from './Footnotes'
+import { TwoColorConfig } from './Palette'
 
 // This was originally created as a catchall for the different types of visualizations.
 // Currently it includes properties that ares specific to one Visualization type.
@@ -37,12 +38,18 @@ type DeprecatedVisualizationType = {
   table: Table
   theme: string
   title: string
+  titleStyle: 'legacy' | 'large' | 'small'
   type: 'chart' | 'map' | 'data-bite' | 'waffle-chart' | 'markup-include' | 'filtered-text' | 'table' | 'navigation'
   usesSharedFilter?: any
   visualizationSubType: string
   visualizationType: string
   xAxis: Axis
   preliminaryData: { type: 'effect' | 'suppression'; value: string }[]
+  twoColor?: TwoColorConfig
+  /** @deprecated Legacy v1 palette name - use general.palette.name instead */
+  palette?: string
+  /** @deprecated Legacy v1 color name - use general.palette.name instead */
+  color?: string
 }
 
 type StatefulProperties = {

package/types/VizFilter.ts

@@ -18,6 +18,7 @@ export type VizFilterStyle =
   | 'dropdown bar'
   | 'multi-select'
   | 'nested-dropdown'
+  | 'combobox'
 export type GeneralFilter = FilterBase & {
   active: string
   queuedActive: string | string[]