@cdc/core 4.25.11 → 4.26.2

package/components/EditorPanel/DataTableEditor.tsx

@@ -195,7 +195,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           updateField={updateField}
         />
       )}
-      {config?.visualizationType !== 'Sankey' && (
+      {config?.visualizationType !== 'Sankey' && config?.visualizationType !== 'Warming Stripes' && (
         <label onClick={e => e.preventDefault()}>
           <span className='edit-label column-heading mt-1'>Exclude Columns </span>
           <MultiSelect
@@ -283,11 +283,35 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         <CheckBox
           value={config.table.showDownloadImgButton}
           fieldName='showDownloadImgButton'
-          label='Display Image Button'
+          label='Display Image Download Link'
           section='table'
           updateField={updateField}
         />
       )}
+      {config.type !== 'table' && config.table.showDownloadImgButton && (
+        <CheckBox
+          value={config.table.includeContextInDownload}
+          fieldName='includeContextInDownload'
+          className='ms-4'
+          label='Include Heading & Context'
+          section='table'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>
+                  When enabled, the image download will include the section heading (H2 or H3) and any explanatory
+                  paragraphs that appear immediately before the visualization. Be sure to test the image download on the
+                  published page to ensure the correct context is included.
+                </p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+      )}
       <label>
         <span className='edit-label column-heading'>Table Cell Min Width</span>
         <input
@@ -296,7 +320,7 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           onChange={e => updateField('table', null, 'cellMinWidth', e.target.value)}
         />
       </label>
-      {config?.visualizationType !== 'Sankey' && (
+      {config?.visualizationType !== 'Sankey' && config?.visualizationType !== 'Warming Stripes' && (
         <Select
           value={config.table.groupBy}
           fieldName={'groupBy'}
@@ -322,28 +346,30 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
           }
         />
       )}
-      <Select
-        label='Pivot Column'
-        tooltip={
-          <Tooltip style={{ textTransform: 'none' }}>
-            <Tooltip.Target>
-              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-            </Tooltip.Target>
-            <Tooltip.Content>
-              <p>Select a Column whos data values will be pivoted to Column Values.</p>
-            </Tooltip.Content>
-          </Tooltip>
-        }
-        value={config.table.pivot?.columnName}
-        options={groupPivotColumns.filter(
-          col => col !== config.table.groupBy && !(config.table.pivot?.valueColumns || []).includes(col)
-        )}
-        initial='-Select-'
-        section='table'
-        subsection='pivot'
-        fieldName='columnName'
-        updateField={updateField}
-      />
+      {config.visualizationType !== 'Warming Stripes' && (
+        <Select
+          label='Pivot Column'
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Select a Column whos data values will be pivoted to Column Values.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+          value={config.table.pivot?.columnName}
+          options={groupPivotColumns.filter(
+            col => col !== config.table.groupBy && !(config.table.pivot?.valueColumns || []).includes(col)
+          )}
+          initial='-Select-'
+          section='table'
+          subsection='pivot'
+          fieldName='columnName'
+          updateField={updateField}
+        />
+      )}
       {config.table.pivot?.columnName && (
         <label>
           <span className='edit-label column-heading mt-1'>

package/components/EditorPanel/EditorPanel.styles.css

@@ -421,3 +421,19 @@
 .editor-toggle svg path {
   fill: currentColor;
 }
+
+/* Shared styles consolidated from package-specific EditorPanel.styles.css files */
+/* Previously duplicated in: data-bite, filtered-text, markup-include */
+.editor-panel .condition-section :is(label) {
+  font-size: 1em;
+}
+
+:is(span).edit-label {
+  margin-bottom: 0.3em;
+  display: block;
+}
+
+.react-tooltip {
+  position: absolute;
+  width: 250px;
+}

package/components/EditorPanel/EditorPanel.tsx

@@ -0,0 +1,144 @@
+import { useState, useEffect, useCallback, useRef, ReactNode } from 'react'
+import { cloneConfig } from '../../helpers/cloneConfig'
+import ErrorBoundary from '../ErrorBoundary'
+import Layout from '../Layout'
+import './EditorPanel.styles.css'
+
+export interface BaseEditorPanelProps<TConfig = any> {
+  config: TConfig
+  updateConfig: (config: TConfig) => void
+  loading?: boolean
+  setParentConfig?: (config: TConfig) => void
+  isDashboard?: boolean
+  title: string
+  children: (props: EditorPanelChildProps<TConfig>) => ReactNode
+  initialDisplayPanel?: boolean
+}
+
+export interface EditorPanelChildProps<TConfig = any> {
+  config: TConfig
+  updateConfig: (config: TConfig) => void
+  displayPanel: boolean
+  convertStateToConfig: () => TConfig
+}
+
+/**
+ * Base EditorPanel component that provides shared functionality for all COVE visualization editors.
+ * Handles common patterns like panel display state, parent config syncing, and layout structure.
+ *
+ * @example
+ * ```tsx
+ * <EditorPanel
+ *   config={config}
+ *   updateConfig={updateConfig}
+ *   loading={loading}
+ *   setParentConfig={setParentConfig}
+ *   isDashboard={isDashboard}
+ *   title="Configure My Visualization"
+ * >
+ *   {() => (
+ *     <Accordion>
+ *       <Accordion.Section title="General">
+ *         // Your configuration UI here
+ *       </Accordion.Section>
+ *     </Accordion>
+ *   )}
+ * </EditorPanel>
+ * ```
+ */
+export function EditorPanel<TConfig = any>({
+  config,
+  updateConfig,
+  loading = false,
+  setParentConfig,
+  isDashboard,
+  title,
+  children,
+  initialDisplayPanel = true
+}: BaseEditorPanelProps<TConfig>) {
+  const [displayPanel, setDisplayPanel] = useState(initialDisplayPanel)
+  const prevConfigRef = useRef<string>()
+
+  /**
+   * Converts current config to a clean state suitable for parent consumption.
+   * Removes runtime-only properties like 'newViz' and 'runtime'.
+   * In dashboard context, preserve 'editing' as it's managed by the dashboard.
+   */
+  const convertStateToConfig = useCallback((): TConfig => {
+    const strippedState = cloneConfig(config)
+    delete strippedState.newViz
+    delete strippedState.runtime
+    // Only delete editing flag if NOT in a dashboard context
+    if (!isDashboard) {
+      delete strippedState.editing
+    }
+    return strippedState
+  }, [config, isDashboard])
+
+  /**
+   * Sync config changes up to parent component when setParentConfig is provided.
+   * This is typically used in dashboard/editor contexts where the parent needs to track changes.
+   * Uses ref to prevent infinite loops by only syncing when config content actually changes.
+   */
+  useEffect(() => {
+    if (setParentConfig) {
+      const strippedState = cloneConfig(config)
+      delete strippedState.newViz
+      delete strippedState.runtime
+      // Only delete editing flag if NOT in a dashboard context
+      if (!isDashboard) {
+        delete strippedState.editing
+      }
+
+      // Only call setParentConfig if the config content actually changed
+      const configString = JSON.stringify(strippedState)
+      if (prevConfigRef.current !== configString) {
+        prevConfigRef.current = configString
+        setParentConfig(strippedState)
+      }
+    }
+  }, [config, setParentConfig, isDashboard])
+
+  /**
+   * Toggle the editor panel visibility and update config to reflect the change.
+   * In dashboard context, also sets editing to false to return to dashboard editor.
+   */
+  const onBackClick = () => {
+    const newDisplayPanel = !displayPanel
+    setDisplayPanel(newDisplayPanel)
+    const newConfig: TConfig = {
+      ...config,
+      showEditorPanel: newDisplayPanel
+    }
+    // If in dashboard mode, set editing to false to return to dashboard editor
+    if (isDashboard) {
+      (newConfig as any).editing = false
+    }
+
+    // Update local config - the useEffect will handle syncing to parent
+    updateConfig(newConfig)
+  }
+
+  // Don't render if loading and panel should be hidden
+  if (loading && !(config as any)?.showEditorPanel) return null
+
+  return (
+    <ErrorBoundary component='EditorPanel'>
+      <Layout.Sidebar
+        displayPanel={displayPanel}
+        isDashboard={isDashboard || false}
+        title={title}
+        onBackClick={onBackClick}
+      >
+        {children({
+          config,
+          updateConfig,
+          displayPanel,
+          convertStateToConfig
+        })}
+      </Layout.Sidebar>
+    </ErrorBoundary>
+  )
+}
+
+export default EditorPanel

package/components/EditorPanel/EditorPanelDispatch.tsx

@@ -0,0 +1,75 @@
+import { ReactNode } from 'react'
+import ErrorBoundary from '../ErrorBoundary'
+import Layout from '../Layout'
+
+export interface EditorPanelDispatchProps<TState = any, TAction = any> {
+  state: TState
+  dispatch: React.Dispatch<TAction>
+  title: string
+  children: (props: EditorPanelDispatchChildProps<TState, TAction>) => ReactNode
+  showEditorPanelKey?: keyof TState
+  toggleActionType?: string
+  isDashboard?: boolean
+}
+
+export interface EditorPanelDispatchChildProps<TState = any, TAction = any> {
+  state: TState
+  dispatch: React.Dispatch<TAction>
+}
+
+/**
+ * Base EditorPanel component for packages using dispatch/reducer pattern (e.g., data-table)
+ *
+ * Provides common wrapper functionality including:
+ * - ErrorBoundary for error handling
+ * - Layout.Sidebar for consistent panel display
+ * - State management for panel visibility
+ *
+ * @example
+ * ```tsx
+ * <EditorPanelDispatch
+ *   state={state}
+ *   dispatch={dispatch}
+ *   title='Configure Data Table'
+ *   showEditorPanelKey='showEditorPanel'
+ *   toggleActionType='SET_SHOW_EDITOR_PANEL'
+ * >
+ *   {({ state, dispatch }) => (
+ *     <Accordion>
+ *       // Your editor content here
+ *     </Accordion>
+ *   )}
+ * </EditorPanelDispatch>
+ * ```
+ */
+export function EditorPanelDispatch<TState = any, TAction = any>({
+  state,
+  dispatch,
+  title,
+  children,
+  showEditorPanelKey = 'showEditorPanel' as keyof TState,
+  toggleActionType = 'SET_SHOW_EDITOR_PANEL',
+  isDashboard = false
+}: EditorPanelDispatchProps<TState, TAction>) {
+  const showEditorPanel = state[showEditorPanelKey] as boolean
+
+  const onBackClick = () => {
+    dispatch({
+      type: toggleActionType,
+      payload: !showEditorPanel
+    } as TAction)
+  }
+
+  return (
+    <ErrorBoundary component='EditorPanel'>
+      <Layout.Sidebar
+        title={title}
+        onBackClick={onBackClick}
+        displayPanel={showEditorPanel}
+        isDashboard={isDashboard}
+      >
+        {children({ state, dispatch })}
+      </Layout.Sidebar>
+    </ErrorBoundary>
+  )
+}

package/components/EditorPanel/FieldSetWrapper.tsx

@@ -9,42 +9,85 @@ type FieldSetProps = {
   controls: OpenControls
   deleteField: Function
   children: React.ReactNode
+  draggable?: boolean
 }
 
-const FieldSet: React.FC<FieldSetProps> = ({ fieldName, fieldKey, fieldType, controls, deleteField, children }) => {
+const FieldSet: React.FC<FieldSetProps> = ({
+  fieldName,
+  fieldKey,
+  fieldType,
+  controls,
+  deleteField,
+  children,
+  draggable = false
+}) => {
   const [openControls, setOpenControls] = controls
   const show = openControls[fieldKey]
   const setShow = (key, value) => {
     setOpenControls({ ...openControls, [key]: value })
   }
 
-  if (!show)
+  // Markup for non-draggable items
+  if (!draggable) {
+    if (!show)
+      return (
+        <div className='mb-1'>
+          <button type='button' className='btn btn-light' onClick={() => setShow(fieldKey, true)}>
+            <Icon display='caretDown' />
+          </button>
+          <span> {fieldName ? `${fieldName}` : 'New ' + fieldType}</span>
+        </div>
+      )
     return (
-      <div className='mb-1'>
-        <button className='btn btn-light' onClick={() => setShow(fieldKey, true)}>
-          <Icon display='caretDown' />
-        </button>
-        <span> {fieldName ? `${fieldName}` : 'New ' + fieldType}</span>
-      </div>
+      <fieldset className='edit-block mb-1' key={fieldKey}>
+        <div className='d-flex justify-content-between'>
+          <button type='button' className='btn btn-light' onClick={() => setShow(fieldKey, false)}>
+            <Icon display='caretUp' />
+          </button>
+          <button
+            type='button'
+            className='btn btn-danger btn-sm'
+            onClick={event => {
+              event.preventDefault()
+              deleteField()
+            }}
+          >
+            Remove
+          </button>
+        </div>
+        {children}
+      </fieldset>
     )
+  }
+
+  // Draggable fieldset
   return (
-    <fieldset className='edit-block mb-1' key={fieldKey}>
-      <div className='d-flex justify-content-between'>
-        <button className='btn btn-light' onClick={() => setShow(fieldKey, false)}>
-          <Icon display='caretUp' />
-        </button>
-        <button
-          className='btn btn-danger btn-sm'
-          onClick={event => {
-            event.preventDefault()
-            deleteField()
-          }}
-        >
-          Remove
+    <div className='editor-field-item'>
+      <div className='editor-field-item__header'>
+        <Icon display='move' size={15} style={{ marginRight: '0.5rem' }} />
+        <button type='button' className='btn btn-light' onClick={() => setShow(fieldKey, !show)}>
+          <Icon display={show ? 'caretUp' : 'caretDown'} size={20} />
         </button>
+        <span className='editor-field-item__name'>{fieldName ? `${fieldName}` : 'New ' + fieldType}</span>
       </div>
-      {children}
-    </fieldset>
+      {show && (
+        <div className='editor-field-item__content'>
+          <div className='editor-field-item__remove-wrapper'>
+            <button
+              type='button'
+              className='btn btn-danger btn-sm'
+              onClick={event => {
+                event.preventDefault()
+                deleteField()
+              }}
+            >
+              Remove
+            </button>
+          </div>
+          {children}
+        </div>
+      )}
+    </div>
   )
 }
 

package/components/EditorPanel/Inputs.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react'
+import { memo, useEffect, useState, useMemo } from 'react'
 import { useDebounce } from 'use-debounce'
 import { DROPDOWN_STYLES } from '../Filters/components/Dropdown'
 
@@ -50,6 +50,13 @@ const TextField = memo((props: TextFieldProps) => {
   const [value, setValue] = useState(stateValue)
   const [debouncedValue] = useDebounce(value, 500)
 
+  // Generate unique ID for accessibility
+  const inputId = useMemo(() => {
+    const sectionPart = section ?? 'root'
+    const subsectionPart = subsection ?? 'none'
+    return attributes.id || `input-${sectionPart}-${subsectionPart}-${fieldName}`
+  }, [section, subsection, fieldName, attributes.id])
+
   useEffect(() => {
     if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
       updateField(section, subsection, fieldName, debouncedValue, i)
@@ -74,25 +81,25 @@ const TextField = memo((props: TextFieldProps) => {
     }
   }
 
-  let formElement = <input type='text' name={name} onChange={onChange} {...attributes} value={value} />
+  let formElement = <input type='text' id={inputId} name={name} onChange={onChange} {...attributes} value={value} />
 
   if ('textarea' === type) {
-    formElement = <textarea name={name} onChange={onChange} {...attributes} value={value}></textarea>
+    formElement = <textarea id={inputId} name={name} onChange={onChange} {...attributes} value={value}></textarea>
   }
 
   if ('number' === type) {
-    formElement = <input type='number' name={name} onChange={onChange} {...attributes} value={value} />
+    formElement = <input type='number' id={inputId} name={name} onChange={onChange} {...attributes} value={value} />
   }
 
   if ('date' === type) {
-    formElement = <input type='date' name={name} onChange={onChange} {...attributes} value={value} />
+    formElement = <input type='date' id={inputId} name={name} onChange={onChange} {...attributes} value={value} />
   }
   if (!display) {
     return <></>
   }
 
   return (
-    <label>
+    <label htmlFor={inputId}>
       <span className='edit-label column-heading'>
         {label}
         {tooltip}
@@ -114,11 +121,20 @@ const CheckBox = memo((props: CheckboxProps) => {
     updateField,
     ...attributes
   } = props
+
+  // Generate unique ID for accessibility
+  const inputId = useMemo(() => {
+    const sectionPart = section ?? 'root'
+    const subsectionPart = subsection ?? 'none'
+    return attributes.id || `checkbox-${sectionPart}-${subsectionPart}-${fieldName}`
+  }, [section, subsection, fieldName, attributes.id])
+
   if (!display) {
     return <></>
   }
   return (
     <label
+      htmlFor={inputId}
       className='checkbox column-heading'
       onClick={e => {
         if (!['SPAN', 'INPUT'].includes(e.target.nodeName)) {
@@ -128,6 +144,7 @@ const CheckBox = memo((props: CheckboxProps) => {
     >
       <input
         type='checkbox'
+        id={inputId}
         className='edit-checkbox'
         name={fieldName}
         checked={value}
@@ -172,6 +189,14 @@ const Select = memo((props: SelectProps) => {
     onChange: onChangeProp,
     ...attributes
   } = props
+
+  // Generate unique ID for accessibility
+  const inputId = useMemo(() => {
+    const sectionPart = section ?? 'root'
+    const subsectionPart = subsection ?? 'none'
+    return attributes.id || `select-${sectionPart}-${subsectionPart}-${fieldName}`
+  }, [section, subsection, fieldName, attributes.id])
+
   const optionsJsx = options?.map((option, index) => {
     if (typeof option === 'string') {
       return (
@@ -200,12 +225,13 @@ const Select = memo((props: SelectProps) => {
   }
 
   return (
-    <label style={disabled ? { opacity: 0.6, pointerEvents: 'none' } : {}}>
+    <label htmlFor={inputId} style={disabled ? { opacity: 0.6, pointerEvents: 'none' } : {}}>
       <span className='edit-label'>
         {label}
         {tooltip}
       </span>
       <select
+        id={inputId}
         className={`cove-form-select ${required && !value ? 'warning' : ''} ${DROPDOWN_STYLES}`}
         name={fieldName}
         value={value}

package/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx

@@ -16,6 +16,7 @@ type NestedDropdownEditorProps = {
   updateField: Function
   updateFilterStyle: Function
   handleGroupingCustomOrder: (index1: number, index2: number) => void
+  onNestedDragAreaHover?: (isHovering: boolean) => void
 }
 
 const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
@@ -25,7 +26,8 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
   handleNameChange: handleGroupColumnNameChange,
   filterIndex,
   rawData,
-  updateField
+  updateField,
+  onNestedDragAreaHover
 }) => {
   const filter = config.filters[filterIndex]
   const subGrouping = filter?.subGrouping
@@ -159,7 +161,10 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
       <Select
         label='Filter Grouping'
         value={filter.columnName}
-        options={[{ value: '', label: '- Select Option -' }, ...columnNameOptions.map(opt => ({ value: opt, label: opt }))]}
+        options={[
+          { value: '', label: '- Select Option -' },
+          ...columnNameOptions.map(opt => ({ value: opt, label: opt }))
+        ]}
         onChange={e => handleGroupColumnNameChange(e.target.value)}
       />
 
@@ -168,9 +173,7 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
         value={subGrouping?.columnName ?? ''}
         options={[
           { value: '', label: '- Select Option -' },
-          ...columnNameOptions
-            .filter(option => option !== filter.columnName)
-            .map(opt => ({ value: opt, label: opt }))
+          ...columnNameOptions.filter(option => option !== filter.columnName).map(opt => ({ value: opt, label: opt }))
         ]}
         onChange={e => {
           handleSubGroupColumnNameChange(e.target.value)
@@ -222,7 +225,11 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
           onChange={e => handleGroupingOrderBy(e.target.value as OrderBy)}
         />
         {filter.order === 'cust' && (
-          <FilterOrder orderedValues={filter.orderedValues} handleFilterOrder={handleGroupingCustomOrder} />
+          <FilterOrder
+            orderedValues={filter.orderedValues}
+            handleFilterOrder={handleGroupingCustomOrder}
+            onNestedDragAreaHover={onNestedDragAreaHover}
+          />
         )}
       </div>
 
@@ -247,6 +254,7 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
                     handleFilterOrder={(sourceIndex, destinationIndex) => {
                       handleSubGroupingCustomOrder(sourceIndex, destinationIndex, orderedSubGroupValues, groupName)
                     }}
+                    onNestedDragAreaHover={onNestedDragAreaHover}
                   />
                 </div>
               )