@cdc/core 4.26.1 → 4.26.3

package/components/CustomColorsEditor/CustomColorsEditor.css

@@ -1,38 +1,38 @@
 .custom-colors-editor {
-  padding: 0.75rem;
+  background-color: #f8f9fa;
   border: 1px solid #dee2e6;
   border-radius: 0.25rem;
-  background-color: #f8f9fa;
+  padding: 0.75rem;
 }
 
 .custom-colors-editor .custom-colors-label {
+  color: #495057;
   display: block;
+  font-size: 0.875rem;
   font-weight: 600;
   margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-  color: #495057;
 }
 
 .custom-colors-editor .custom-colors-notice {
-  display: flex;
   align-items: flex-start;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  margin-bottom: 0.75rem;
   background-color: #d1ecf1;
   border: 1px solid #bee5eb;
   border-radius: 0.25rem;
   color: #0c5460;
+  display: flex;
   font-size: 0.8125rem;
+  gap: 0.5rem;
   line-height: 1.5;
+  margin-bottom: 0.75rem;
+  padding: 0.75rem;
 }
 
 .custom-colors-editor .custom-colors-notice .notice-icon {
-  width: 16px;
-  height: 16px;
+  color: #17a2b8;
   flex-shrink: 0;
+  height: 16px;
   margin-top: 0.125rem;
-  color: #17a2b8;
+  width: 16px;
 }
 
 .custom-colors-editor .custom-colors-notice strong {
@@ -41,8 +41,8 @@
 
 .custom-colors-editor .custom-colors-notice a {
   color: #0c5460;
-  text-decoration: underline;
   font-weight: 500;
+  text-decoration: underline;
 }
 
 .custom-colors-editor .custom-colors-notice a:hover {
@@ -51,21 +51,21 @@
 }
 
 .custom-colors-editor .custom-colors-preview {
-  display: flex;
-  gap: 2px;
-  margin-bottom: 0.75rem;
-  padding: 0.5rem;
   background-color: #fff;
   border: 1px solid #dee2e6;
   border-radius: 0.25rem;
+  display: flex;
+  gap: 2px;
+  margin-bottom: 0.75rem;
   min-height: 36px;
   overflow: hidden;
+  padding: 0.5rem;
 }
 
 .custom-colors-editor .custom-colors-preview .preview-swatch {
+  border-radius: 2px;
   flex: 1;
   min-width: 8px;
-  border-radius: 2px;
   transition: transform 0.15s ease;
 }
 
@@ -110,21 +110,21 @@
 }
 
 .custom-colors-editor .custom-color-item.dragging {
-  opacity: 0.5;
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   cursor: grabbing;
+  opacity: 0.5;
 }
 
 .custom-colors-editor .custom-color-item:hover:not(.dragging) {
-  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
   border-color: #adb5bd;
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
 }
 
 .custom-colors-editor .color-item-controls {
-  display: flex;
   align-items: center;
-  gap: 0.5rem;
+  display: flex;
   flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
 @media (max-width: 576px) {
@@ -135,12 +135,12 @@
 
 .custom-colors-editor .color-item-drag-handle {
   color: #adb5bd;
-  font-size: 0.875rem;
   cursor: grab;
-  user-select: none;
-  line-height: 1;
   flex-shrink: 0;
+  font-size: 0.875rem;
+  line-height: 1;
   padding: 0 0.125rem;
+  user-select: none;
 }
 
 .custom-colors-editor .color-item-drag-handle:active {
@@ -152,23 +152,23 @@
 }
 
 .custom-colors-editor .color-item-number {
+  color: #6c757d;
+  flex-shrink: 0;
+  font-size: 0.75rem;
   font-weight: 600;
   min-width: 24px;
   text-align: right;
-  color: #6c757d;
-  font-size: 0.75rem;
-  flex-shrink: 0;
 }
 
 .custom-colors-editor .color-picker {
-  width: 48px;
-  height: 34px;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
   cursor: pointer;
-  padding: 2px;
   flex-shrink: 0;
+  height: 34px;
+  padding: 2px;
   transition: border-color 0.15s ease;
+  width: 48px;
 }
 
 .custom-colors-editor .color-picker:hover {
@@ -176,15 +176,15 @@
 }
 
 .custom-colors-editor .color-picker:focus {
-  outline: none;
   border-color: #80bdff;
   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  outline: none;
 }
 
 .custom-colors-editor .color-input-wrapper {
   flex: 1;
-  min-width: 0;
   margin-bottom: 0;
+  min-width: 0;
 }
 
 /* Override TextField label wrapper styles */
@@ -210,26 +210,26 @@
 
 .custom-colors-editor .color-item-buttons {
   display: flex;
+  flex-shrink: 0;
   gap: 0.25rem;
   margin-left: auto;
-  flex-shrink: 0;
 }
 
 .custom-colors-editor .btn-move,
 .custom-colors-editor .btn-remove {
-  padding: 0.25rem 0.5rem;
+  align-items: center;
+  background-color: #fff;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
-  background-color: #fff;
   cursor: pointer;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  transition: all 0.15s ease;
   display: inline-flex;
-  align-items: center;
+  font-size: 0.875rem;
+  height: 28px;
   justify-content: center;
+  line-height: 1.5;
   min-width: 28px;
-  height: 28px;
+  padding: 0.25rem 0.5rem;
+  transition: all 0.15s ease;
 }
 
 .custom-colors-editor .btn-move:hover:not(:disabled),
@@ -246,39 +246,39 @@
 
 .custom-colors-editor .btn-move:disabled,
 .custom-colors-editor .btn-remove:disabled {
-  opacity: 0.35;
   cursor: not-allowed;
+  opacity: 0.35;
 }
 
 .custom-colors-editor .btn-remove {
   color: #dc3545;
-  font-weight: 700;
   font-size: 1.125rem;
+  font-weight: 700;
 }
 
 .custom-colors-editor .btn-remove:hover:not(:disabled) {
   background-color: #dc3545;
-  color: #fff;
   border-color: #dc3545;
+  color: #fff;
 }
 
 .custom-colors-editor .btn-add-color {
-  width: 100%;
-  padding: 0.5rem;
+  background-color: #fff;
   border: 2px dashed #ced4da;
   border-radius: 0.25rem;
-  background-color: #fff;
   color: #6c757d;
-  font-weight: 600;
-  font-size: 0.875rem;
   cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 600;
+  padding: 0.5rem;
   transition: all 0.15s ease;
+  width: 100%;
 }
 
 .custom-colors-editor .btn-add-color:hover:not(:disabled) {
+  background-color: #e7f1ff;
   border-color: #007bff;
   color: #007bff;
-  background-color: #e7f1ff;
 }
 
 .custom-colors-editor .btn-add-color:active:not(:disabled) {
@@ -286,14 +286,14 @@
 }
 
 .custom-colors-editor .btn-add-color:disabled {
-  opacity: 0.5;
   cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .custom-colors-editor .custom-colors-info {
-  text-align: center;
-  font-size: 0.75rem;
   color: #6c757d;
-  margin-top: 0.5rem;
+  font-size: 0.75rem;
   font-style: italic;
+  margin-top: 0.5rem;
+  text-align: center;
 }

package/components/CustomColorsEditor/CustomColorsEditor.tsx

@@ -7,15 +7,13 @@ interface CustomColorsEditorProps {
   onChange: (colors: string[]) => void
   label?: string
   minColors?: number
-  maxColors?: number
 }
 
 const CustomColorsEditor: React.FC<CustomColorsEditorProps> = ({
   colors = [],
   onChange,
   label = 'Custom Colors',
-  minColors = 1,
-  maxColors = 20
+  minColors = 1
 }) => {
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null)
 
@@ -26,11 +24,8 @@ const CustomColorsEditor: React.FC<CustomColorsEditorProps> = ({
   }
 
   const handleAddColor = () => {
-    if (colors.length < maxColors) {
-      // Add a new color (default to the last color or a neutral color)
-      const defaultColor = colors.length > 0 ? colors[colors.length - 1] : '#3366cc'
-      onChange([...colors, defaultColor])
-    }
+    const defaultColor = colors.length > 0 ? colors[colors.length - 1] : '#3366cc'
+    onChange([...colors, defaultColor])
   }
 
   const handleRemoveColor = (index: number) => {
@@ -191,7 +186,6 @@ const CustomColorsEditor: React.FC<CustomColorsEditorProps> = ({
       <button
         type="button"
         onClick={handleAddColor}
-        disabled={colors.length >= maxColors}
         className="btn-add-color"
       >
         + Add Color
@@ -200,7 +194,6 @@ const CustomColorsEditor: React.FC<CustomColorsEditorProps> = ({
       <div className="custom-colors-info">
         {colors.length} color{colors.length !== 1 ? 's' : ''}
         {colors.length < minColors && ` (minimum ${minColors} required)`}
-        {colors.length >= maxColors && ` (maximum reached)`}
       </div>
     </div>
   )

package/components/DataTable/DataTable.tsx

@@ -6,6 +6,7 @@ import MediaControls from '@cdc/core/components/MediaControls'
 import Loading from '@cdc/core/components/Loading'
 import DownloadButton from '../DownloadButton'
 import { customSort } from './helpers/customSort'
+import { applyCustomOrder } from './helpers/applyCustomOrder'
 import ChartHeader from './components/ChartHeader'
 import BoxplotHeader from './components/BoxplotHeader'
 import MapHeader from './components/MapHeader'
@@ -25,18 +26,17 @@ import isRightAlignedTableValue from '@cdc/core/helpers/isRightAlignedTableValue
 import './data-table.css'
 import _ from 'lodash'
 import { getDataSeriesColumns } from './helpers/getDataSeriesColumns'
+import { getMapDataTableColumnKeys } from './helpers/getMapDataTableColumnKeys'
 
 export type DataTableProps = {
   colorScale?: Function
   columns?: Record<string, Column>
   config: TableConfig
   dataConfig?: Object
-  defaultSortBy?: string
   displayGeoName?: (row: string) => string
   expandDataTable: boolean
   formatLegendLocation?: (row: string, runtimeLookup: string) => string
   groupBy?: string
-  headerColor?: string
   imageRef?: string
   indexTitle?: string
   isDebug?: boolean
@@ -64,6 +64,7 @@ export type DataTableProps = {
   showDownloadImgButton?: boolean
   showDownloadPdfButton?: boolean
   includeContextInDownload?: boolean
+  hasSubtextAbove?: boolean
   // Map-specific props (optional)
   legendMemo?: React.MutableRefObject<Map<any, any>>
   legendSpecialClassLastMemo?: React.MutableRefObject<Map<any, any>>
@@ -75,11 +76,9 @@ const DataTable = (props: DataTableProps) => {
     columns,
     config,
     dataConfig,
-    defaultSortBy,
     displayGeoName,
     expandDataTable,
     formatLegendLocation,
-    headerColor,
     rawData,
     runtimeData: parentRuntimeData,
     tabbingId,
@@ -91,6 +90,7 @@ const DataTable = (props: DataTableProps) => {
     showDownloadImgButton,
     showDownloadPdfButton,
     includeContextInDownload = false,
+    hasSubtextAbove = false,
     imageRef
   } = props
   const runtimeData = useMemo(() => {
@@ -106,12 +106,33 @@ const DataTable = (props: DataTableProps) => {
   }, [parentRuntimeData, config.table.pivot?.columnName, config.table.pivot?.valueColumns])
 
   const [expanded, setExpanded] = useState(expandDataTable)
-  const [sortBy, setSortBy] = useState<any>({
-    column: defaultSortBy || '',
-    asc: false,
-    colIndex: null
+
+  // Initialize sort state from config.table.defaultSort
+  const defaultSort = config.table?.defaultSort
+  const [sortBy, setSortBy] = useState<any>(() => {
+    if (defaultSort?.column) {
+      return {
+        column: defaultSort.column,
+        asc: defaultSort.sortDirection === 'asc' ? true : defaultSort.sortDirection === 'custom' ? null : false,
+        colIndex: null
+      }
+    }
+    return { column: '', asc: false, colIndex: null }
   })
 
+  // Re-sync sort state when defaultSort changes in the editor
+  useEffect(() => {
+    if (defaultSort?.column) {
+      setSortBy({
+        column: defaultSort.column,
+        asc: defaultSort.sortDirection === 'asc' ? true : defaultSort.sortDirection === 'custom' ? null : false,
+        colIndex: null
+      })
+    } else {
+      setSortBy({ column: '', asc: false, colIndex: null })
+    }
+  }, [defaultSort?.column, defaultSort?.sortDirection, defaultSort?.customOrder])
+
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
 
   // Create default refs for map-specific props when not provided
@@ -157,6 +178,14 @@ const DataTable = (props: DataTableProps) => {
   }
 
   const rawRows = Object.keys(runtimeData).filter(column => column != 'columns')
+
+  // Determine if custom order sort is active (user hasn't overridden by clicking a column header)
+  const isCustomOrderActive =
+    sortBy.asc === null &&
+    defaultSort?.sortDirection === 'custom' &&
+    defaultSort?.customOrder?.length > 0 &&
+    sortBy.column === defaultSort.column
+
   const rows =
     isVertical && sortBy.column
       ? rawRows.sort((a, b) => {
@@ -175,6 +204,10 @@ const DataTable = (props: DataTableProps) => {
             dataA = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[a][config.xAxis.dataKey])
             dataB = timeParse(config.runtime.xAxis.dateParseFormat)(runtimeData[b][config.xAxis.dataKey])
           }
+          // Use custom order when active
+          if (isCustomOrderActive && dataA !== undefined && dataB !== undefined) {
+            return applyCustomOrder(dataA, dataB, defaultSort.customOrder)
+          }
           return dataA || dataB ? customSort(dataA, dataB, sortBy, config) : 0
         })
       : rawRows
@@ -229,14 +262,6 @@ const DataTable = (props: DataTableProps) => {
   const getClassNames = (): string => {
     const classes = ['data-table-container']
 
-    const hasDownloadLinkAbove =
-      (config.table.download || showDownloadImgButton || showDownloadPdfButton) && !config.table.showDownloadLinkBelow
-    const isStandaloneTable = config.type === 'table'
-
-    if (!hasDownloadLinkAbove && !isStandaloneTable) {
-      classes.push('mt-4')
-    }
-
     classes.push(viewport)
 
     return classes.join(' ')
@@ -251,6 +276,10 @@ const DataTable = (props: DataTableProps) => {
       const getVisibleColumns = () => {
         if (!config.columns) return []
 
+        if (config.type === 'map') {
+          return getMapDataTableColumnKeys(config.columns).map(columnKey => config.columns[columnKey].name)
+        }
+
         return Object.values(config.columns)
           .filter(col => col.dataTable !== false)
           .map(col => col.name)
@@ -325,7 +354,7 @@ const DataTable = (props: DataTableProps) => {
       const classes = ['download-links']
       if (!belowTable) {
         if (hasDownloadLink) {
-          classes.push('mt-4', 'mb-2')
+          classes.push('mb-2')
         }
       } else {
         if (hasDownloadLink) {
@@ -394,7 +423,6 @@ const DataTable = (props: DataTableProps) => {
             <DownloadButton
               rawData={getDownloadData()}
               fileName={`${vizTitle || 'data-table'}.csv`}
-              headerColor={headerColor}
               interactionLabel={interactionLabel}
               config={config}
             />

package/components/DataTable/DataTableStandAlone.tsx

@@ -78,6 +78,7 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
         markupVariables={config['markupVariables']}
         enableMarkupVariables={config['enableMarkupVariables']}
         data={config.data}
+        dataMetadata={config['dataMetadata']}
       />
     </>
   )

package/components/DataTable/components/ChartHeader.tsx

@@ -62,8 +62,9 @@ const ChartHeader = ({
     if (columnHeaderText === notApplicableText) return
 
     return (
-      <span className='cdcdataviz-sr-only'>{`Press command, modifier, or enter key to sort by ${columnHeaderText} in ${sortBy.column !== columnHeaderText ? 'ascending' : sortBy.column === 'desc' ? 'descending' : 'ascending'
-        }  order`}</span>
+      <span className='cdcdataviz-sr-only'>{`Press command, modifier, or enter key to sort by ${columnHeaderText} in ${
+        sortBy.column !== columnHeaderText ? 'ascending' : sortBy.column === 'desc' ? 'descending' : 'ascending'
+      }  order`}</span>
     )
   }
 
@@ -101,14 +102,13 @@ const ChartHeader = ({
           const text = getSeriesName(column, config)
           const newSortBy = getNewSortBy(sortBy, column, index)
           const sortByAsc = sortBy.column === column ? sortBy.asc : undefined
-          const isSortedCol = column === sortBy.column && !hasRowType
 
           return (
             <th
               style={{
                 minWidth: (config.table.cellMinWidth || 0) + 'px',
                 textAlign: rightAlignedCols && rightAlignedCols[index] ? 'right' : '',
-                paddingRight: isSortedCol ? '1.3em' : ''
+                paddingRight: '1.8em'
               }}
               key={`col-header-${column}__${index}`}
               tabIndex={0}
@@ -123,7 +123,9 @@ const ChartHeader = ({
                   eventAction: 'click',
                   eventLabel: interactionLabel,
                   vizTitle: getVizTitle(config),
-                  specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                  specifics: `column: ${newSortBy.column || 'none'}, order: ${
+                    newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'
+                  }`
                 })
                 setSortBy(newSortBy)
               }}
@@ -137,11 +139,14 @@ const ChartHeader = ({
                     eventAction: 'keyboard',
                     eventLabel: interactionLabel,
                     vizTitle: getVizTitle(config),
-                    specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                    specifics: `column: ${newSortBy.column || 'none'}, order: ${
+                      newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'
+                    }`
                   })
                   setSortBy(newSortBy)
                 }
               }}
+              className={sortBy.column === column ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'}
               {...(sortBy.column === column
                 ? sortBy.asc
                   ? { 'aria-sort': 'ascending' }
@@ -149,7 +154,7 @@ const ChartHeader = ({
                 : null)}
             >
               <ColumnHeadingText text={text} config={config} />
-              {isSortedCol && <SortIcon ascending={sortByAsc} />}
+              <SortIcon ascending={sortByAsc} />
               <ScreenReaderSortByText sortBy={sortBy} config={config} text={text} />
             </th>
           )
@@ -169,13 +174,12 @@ const ChartHeader = ({
             row !== '__series__' ? getChartCellValue(row, column, config, data, rightAxisItemsMap) : '__series__'
           const newSortBy = getNewSortBy(sortBy, column, index)
           const sortByAsc = sortBy.colIndex === index ? sortBy.asc : undefined
-          const isSortedCol = index === sortBy.colIndex && !hasRowType
           return (
             <th
               style={{
                 minWidth: (config.table.cellMinWidth || 0) + 'px',
                 textAlign: rightAlignedCols && rightAlignedCols[index] ? 'right' : '',
-                paddingRight: isSortedCol ? '1.3em' : ''
+                paddingRight: '1.8em'
               }}
               key={`col-header-${text}__${index}`}
               tabIndex={0}
@@ -190,7 +194,9 @@ const ChartHeader = ({
                   eventAction: 'click',
                   eventLabel: interactionLabel,
                   vizTitle: getVizTitle(config),
-                  specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                  specifics: `column: ${newSortBy.column || 'none'}, order: ${
+                    newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'
+                  }`
                 })
                 setSortBy(newSortBy)
               }}
@@ -203,11 +209,14 @@ const ChartHeader = ({
                     eventAction: 'keyboard',
                     eventLabel: interactionLabel,
                     vizTitle: getVizTitle(config),
-                    specifics: `column: ${newSortBy.column || 'none'}, order: ${newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'}`
+                    specifics: `column: ${newSortBy.column || 'none'}, order: ${
+                      newSortBy.asc === true ? 'asc' : newSortBy.asc === false ? 'desc' : 'none'
+                    }`
                   })
                   setSortBy(newSortBy)
                 }
               }}
+              className={sortBy.colIndex === index ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'}
               {...(sortBy.column === text
                 ? sortBy.asc
                   ? { 'aria-sort': 'ascending' }
@@ -215,7 +224,7 @@ const ChartHeader = ({
                 : null)}
             >
               <ColumnHeadingText text={text} config={config} />
-              {isSortedCol && <SortIcon ascending={sortByAsc} />}
+              <SortIcon ascending={sortByAsc} />
 
               <ScreenReaderSortByText text={text} config={config} sortBy={sortBy} />
             </th>