@cdc/core 4.25.10 → 4.26.1

package/hooks/useLegendSeparators.ts

@@ -0,0 +1,26 @@
+import { clamp } from 'lodash'
+
+// TODO: generalize this to be used in legends other than linear block gradient
+
+const LEGEND_SEPARATOR_SIZE = 0.02
+const LEGEND_SEPARATOR_SIZE_MAX = 20
+const LEGEND_SEPARATOR_SIZE_MIN = 8
+
+const useLegendSeparators = (separators, legendWidth, allowsLegendSeparators) => {
+  const legendSeparators = allowsLegendSeparators
+    ? separators?.replace(' ', '').split(',').map(Number).filter(Boolean) || []
+    : []
+  const separatorSize = clamp(legendWidth * LEGEND_SEPARATOR_SIZE, LEGEND_SEPARATOR_SIZE_MIN, LEGEND_SEPARATOR_SIZE_MAX)
+  const legendSeparatorsToSubtract = legendSeparators.length * separatorSize
+  const getTickSeparatorsAdjustment = (index: number) =>
+    legendSeparators.reduce((acc, separators) => (index >= separators ? acc + separatorSize : acc), 0)
+
+  return {
+    legendSeparators,
+    separatorSize,
+    legendSeparatorsToSubtract,
+    getTickSeparatorsAdjustment
+  }
+}
+
+export default useLegendSeparators

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,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.25.10",
+  "version": "4.26.1",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -22,8 +22,10 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "@hello-pangea/dnd": "^16.2.0",
     "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,13 +42,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d",
+  "gitHead": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16",
   "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"
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

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/_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 {