@cdc/core 4.24.7 → 4.24.9

package/assets/icon-gear-multi.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #231f20;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-1" d="M218.85,262.45c-.39-37.16-30.83-66.97-68.01-66.58-37.16.41-66.97,30.86-66.58,68.03.4,37.15,30.86,66.94,68.02,66.57,37.18-.41,66.98-30.86,66.57-68.02ZM151.88,292.62c-4.07.04-7.95-.74-11.49-2.19-10.62-4.36-18.15-14.75-18.28-26.94-.17-16.27,12.86-29.59,29.13-29.76,4.06-.04,7.95.74,11.48,2.19,10.62,4.35,18.15,14.74,18.28,26.94.18,16.25-12.87,29.59-29.12,29.76Z"/>
+    <path class="cls-1" d="M250.22,280.09c.99-5.85,1.5-11.87,1.44-18.01-.05-3.92-.34-7.82-.82-11.64l23.73-17.16c-1.72-7.65-4.12-15.04-7.14-22.1l-30.29.03c-4.82-7.93-10.7-15.12-17.46-21.39l7.59-30.08c-6.16-4.7-12.74-8.82-19.71-12.35l-24.62,20.71c-7.91-2.64-16.26-4.28-24.91-4.81l-4.17-8.61-10.1-20.88c-7.89.37-15.6,1.46-23.03,3.17l-5.77,33c-7.53,2.96-14.62,6.81-21.11,11.39l-30.76-13.8c-5.69,5.27-10.89,11.08-15.55,17.29l16.85,29.12c-3.92,6.93-7.04,14.4-9.23,22.24l-32.12,9.11c-.72,5.75-1.1,11.59-1.03,17.54.02,1.92.1,3.82.2,5.73l30.61,11.08c1.43,8.61,3.98,16.85,7.44,24.55l-17.93,26.42c4.21,6.54,9,12.7,14.3,18.34l28.94-10.58c6.98,6.15,14.83,11.31,23.32,15.33l3.06,29.9c7.33,2.28,14.93,3.88,22.74,4.81l14.52-25.22c1.14.03,2.29.07,3.45.04,9.06-.08,17.81-1.4,26.14-3.74l20.52,19.93c7.2-3.04,14.06-6.7,20.53-10.93l-4.95-27.85c7.91-6.47,14.82-14.1,20.44-22.65l28.22,2.05c3.53-6.85,6.48-14.04,8.74-21.52l-22.06-18.46ZM152.4,341.41c-43.21.47-78.62-34.19-79.08-77.4-.46-43.2,34.19-78.61,77.4-79.08,43.21-.46,78.6,34.21,79.06,77.41.47,43.2-34.18,78.6-77.39,79.07Z"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M345.31,139.47c-7.44-19.18-29.04-28.71-48.23-21.26-19.18,7.45-28.7,29.05-21.25,48.24,7.45,19.18,29.04,28.69,48.24,21.25,19.19-7.46,28.71-29.05,21.25-48.24ZM316.47,168.16c-2.1.82-4.26,1.17-6.38,1.1-6.35-.19-12.28-4.11-14.73-10.4-3.26-8.4.9-17.85,9.3-21.11,2.1-.82,4.26-1.17,6.38-1.1,6.35.19,12.28,4.1,14.73,10.4,3.26,8.39-.9,17.85-9.29,21.1Z"/>
+    <path class="cls-1" d="M365.01,142.5c-.63-3.23-1.54-6.45-2.76-9.62-.79-2.02-1.7-3.99-2.69-5.87l8.96-13.52c-2.38-3.63-5.07-7-8.01-10.06l-15.7,5.92c-4.05-3.17-8.5-5.75-13.22-7.69l-1.93-17.07c-4.11-1.24-8.33-2.09-12.62-2.56l-8.73,15.54c-4.61.17-9.26.95-13.85,2.36l-3.84-3.65-9.31-8.86c-4.02,1.73-7.8,3.79-11.32,6.13l3.44,18.23c-3.33,3-6.25,6.38-8.72,10.02l-18.64-1.16c-1.93,3.84-3.49,7.87-4.69,11.99l14.41,11.81c-.68,4.36-.85,8.84-.45,13.33l-14.87,10.98c.75,3.12,1.69,6.22,2.88,9.29.38.99.8,1.96,1.22,2.93l18.03-.22c2.42,4.19,5.35,7.96,8.64,11.28l-4.15,17.19c3.46,2.57,7.14,4.83,10.99,6.72l12.94-11.13c4.82,1.83,9.89,2.98,15.07,3.4l7.42,14.9c4.24-.25,8.5-.9,12.73-1.94l2.61-15.9c.6-.21,1.2-.41,1.8-.65,4.68-1.81,8.96-4.2,12.82-7.04l14.52,6.33c3.14-2.98,5.99-6.21,8.51-9.67l-7.99-13.47c2.84-4.9,4.94-10.2,6.18-15.73l15.03-4.44c.49-4.24.62-8.54.34-12.86l-15.03-5.27ZM326.25,193.35c-22.31,8.66-47.42-2.4-56.08-24.71-8.66-22.3,2.4-47.42,24.71-56.08,22.31-8.66,47.41,2.41,56.07,24.72,8.66,22.3-2.4,47.41-24.7,56.07Z"/>
+  </g>
+  <g>
+    <path class="cls-1" d="M219.71,100.11c13.58-15.46,12.07-39.01-3.4-52.6-15.47-13.58-39.02-12.06-52.61,3.41-13.58,15.46-12.05,39.01,3.41,52.6,15.47,13.58,39.02,12.06,52.6-3.41ZM180.95,87.77c-1.69-1.49-3-3.24-3.92-5.15-2.76-5.72-2.02-12.79,2.43-17.87,5.95-6.77,16.25-7.44,23.02-1.49,1.69,1.49,3,3.24,3.92,5.15,2.77,5.72,2.03,12.79-2.43,17.87-5.94,6.76-16.25,7.44-23.01,1.49Z"/>
+    <path class="cls-1" d="M226.11,118.99c2.57-2.05,5.01-4.34,7.26-6.89,1.43-1.64,2.75-3.35,3.97-5.1l16.13,1.71c2.12-3.79,3.87-7.72,5.23-11.75l-12.5-11.19c.94-5.05,1.18-10.19.72-15.28l14.26-9.59c-.8-4.22-1.99-8.35-3.55-12.38l-17.81-.57c-2.28-4.01-5.12-7.78-8.49-11.2l1.47-5.09,3.56-12.34c-3.39-2.77-6.97-5.17-10.67-7.21l-14.59,11.47c-4.2-1.57-8.54-2.6-12.92-3.11l-7.57-17.07c-4.3.06-8.59.54-12.81,1.37l-3.83,18.24c-4.18,1.41-8.23,3.33-12.03,5.75l-16.61-8.13c-2.42,2.1-4.74,4.37-6.91,6.85-.7.8-1.37,1.61-2.04,2.44l8.52,15.89c-2.6,4.08-4.59,8.42-6.02,12.87l-17.16,4.25c-.68,4.26-.99,8.56-.89,12.85l15.84,6.34c.6,5.12,1.92,10.15,3.94,14.94l-9.8,13.46c2.18,3.65,4.72,7.12,7.59,10.4l15.31-5.02c.46.44.92.87,1.41,1.29,3.76,3.32,7.86,6.01,12.16,8.13l1.09,15.81c4.09,1.41,8.27,2.44,12.5,3.09l8.26-13.31c5.65.26,11.32-.33,16.8-1.78l10.87,11.29c3.99-1.52,7.86-3.39,11.57-5.64l-2.26-15.77ZM163.11,108.07c-17.98-15.79-19.75-43.18-3.96-61.15,15.79-17.98,43.17-19.75,61.16-3.96,17.98,15.8,19.74,43.18,3.95,61.15-15.79,17.98-43.16,19.75-61.15,3.96Z"/>
+  </g>
+</svg>

package/components/Alert/components/Alert.styles.css

@@ -0,0 +1,15 @@
+.cdc-open-viz-module {
+  .accordion__panel > .alert {
+    margin-bottom: 15px;
+  }
+
+  .alert {
+    align-items: center;
+    justify-content: center;
+    display: inline-flex;
+
+    .cove-icon {
+      margin: 5px;
+    }
+  }
+}

package/components/Alert/components/Alert.tsx

@@ -0,0 +1,39 @@
+import Icon from '../../ui/Icon'
+
+import DOMPurify from 'dompurify'
+import React from 'react'
+
+import './Alert.styles.css'
+
+type AlertProps = {
+  // type of alert for styling the alert box
+  type?: 'success' | 'danger' | 'info'
+  // message to display in the alert box
+  message?: string
+  // size of the icon in the alert box
+  iconSize?: number
+  // heading for the alert box
+  heading?: string
+}
+
+const Alert: React.FC<AlertProps> = ({ type = 'info', message = '', iconSize = 21, heading }) => {
+  // sanitize the text for setting dangerouslySetInnerHTML
+  const sanitizedData = () => ({
+    __html: DOMPurify.sanitize(message)
+  })
+
+  // reset styles to avoid conflicts in wcms
+  const styleResets = { width: 'unset', height: 'unset', paddingRight: '5px' }
+
+  return (
+    <div className={`alert alert-${type} p-1`} role='alert'>
+      {heading && <h4 className='alert-heading'>{heading}</h4>}
+      {type === 'success' && <Icon display='check' size={iconSize} />}
+      {type === 'danger' && <Icon display='warningCircle' size={iconSize} />}
+      {type === 'info' && <Icon display='info' size={iconSize} />}
+      <span dangerouslySetInnerHTML={sanitizedData()} />
+    </div>
+  )
+}
+
+export default Alert

package/components/Alert/index.tsx

@@ -0,0 +1,3 @@
+import Alert from './components/Alert'
+
+export default Alert

package/components/DataTable/DataTable.tsx

@@ -53,7 +53,21 @@ export type DataTableProps = {
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = (props: DataTableProps) => {
-  const { config, dataConfig, tableTitle, vizTitle, rawData, runtimeData: parentRuntimeData, headerColor, expandDataTable, columns, viewport, formatLegendLocation, tabbingId, wrapColumns } = props
+  const {
+    config,
+    dataConfig,
+    tableTitle,
+    vizTitle,
+    rawData,
+    runtimeData: parentRuntimeData,
+    headerColor,
+    expandDataTable,
+    columns,
+    viewport,
+    formatLegendLocation,
+    tabbingId,
+    wrapColumns
+  } = props
   const runtimeData = useMemo(() => {
     const data = removeNullColumns(parentRuntimeData)
     if (config.table.pivot) {
@@ -67,7 +81,11 @@ const DataTable = (props: DataTableProps) => {
 
   const [expanded, setExpanded] = useState(expandDataTable)
 
-  const [sortBy, setSortBy] = useState<any>({ column: config.type === 'map' ? 'geo' : 'date', asc: false, colIndex: null })
+  const [sortBy, setSortBy] = useState<any>({
+    column: config.type === 'map' ? 'geo' : 'date',
+    asc: false,
+    colIndex: null
+  })
 
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
 
@@ -86,7 +104,8 @@ const DataTable = (props: DataTableProps) => {
   // Change accessibility label depending on expanded status
   useEffect(() => {
     const expandedLabel = 'Accessible data table.'
-    const collapsedLabel = 'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
+    const collapsedLabel =
+      'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
 
     if (expanded === true && accessibilityLabel !== expandedLabel) {
       setAccessibilityLabel(expandedLabel)
@@ -141,7 +160,9 @@ const DataTable = (props: DataTableProps) => {
 
   const caption = useMemo(() => {
     if (config.type === 'map') {
-      return config.table.caption ? config.table.caption : `Data table showing data for the ${mapLookup[config.general.geoType]} figure.`
+      return config.table.caption
+        ? config.table.caption
+        : `Data table showing data for the ${mapLookup[config.general.geoType]} figure.`
     } else {
       return config.table.caption ? config.table.caption : `Data table showing data for the ${config.type} figure.`
     }
@@ -199,44 +220,90 @@ const DataTable = (props: DataTableProps) => {
       <ErrorBoundary component='DataTable'>
         <MediaControls.Section classes={getMediaControlsClasses()}>
           <MediaControls.Link config={config} dashboardDataConfig={dataConfig} />
-          {(config.table.download || config.general?.showDownloadButton) && <DownloadButton rawData={getDownloadData()} fileName={`${vizTitle || 'data-table'}.csv`} headerColor={headerColor} />}
+          {(config.table.download || config.general?.showDownloadButton) && (
+            <DownloadButton
+              rawData={getDownloadData()}
+              fileName={`${vizTitle || 'data-table'}.csv`}
+              headerColor={headerColor}
+            />
+          )}
         </MediaControls.Section>
-        <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
+        <section
+          id={tabbingId.replace('#', '')}
+          className={`data-table-container ${viewport} w-100`}
+          aria-label={accessibilityLabel}
+        >
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
-          {config.table.collapsible !== false && <ExpandCollapse expanded={expanded} setExpanded={setExpanded} fontSize={config.fontSize} tableTitle={tableTitle} viewport={viewport} />}
+          {config.table.collapsible !== false && (
+            <ExpandCollapse
+              expanded={expanded}
+              setExpanded={setExpanded}
+              fontSize={config.fontSize}
+              tableTitle={tableTitle}
+              viewport={viewport}
+            />
+          )}
           <div className='table-container' style={limitHeight}>
             <Table
+              preliminaryData={config.preliminaryData}
               viewport={viewport}
               wrapColumns={wrapColumns}
-              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport }) : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })}
+              childrenMatrix={
+                config.type === 'map'
+                  ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport })
+                  : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })
+              }
               tableName={config.type}
               caption={caption}
               stickyHeader
               hasRowType={hasRowType}
-              headContent={config.type === 'map' ? <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} /> : <ChartHeader data={runtimeData} {...props} hasRowType={hasRowType} isVertical={isVertical} sortBy={sortBy} setSortBy={setSortBy} />}
-              tableOptions={{ className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${isVertical ? '' : ' horizontal'}`, 'aria-live': 'assertive', 'aria-rowcount': config?.data?.length ? config.data.length : -1, hidden: !expanded }}
+              headContent={
+                config.type === 'map' ? (
+                  <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} />
+                ) : (
+                  <ChartHeader
+                    data={runtimeData}
+                    {...props}
+                    hasRowType={hasRowType}
+                    isVertical={isVertical}
+                    sortBy={sortBy}
+                    setSortBy={setSortBy}
+                  />
+                )
+              }
+              tableOptions={{
+                className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${
+                  isVertical ? '' : ' horizontal'
+                }`,
+                'aria-live': 'assertive',
+                'aria-rowcount': config?.data?.length ? config.data.length : -1,
+                hidden: !expanded
+              }}
               fontSize={config.fontSize}
             />
 
             {/* REGION Data Table */}
-            {noRelativeRegions && config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' && (
-              <Table
-                viewport={viewport}
-                wrapColumns={wrapColumns}
-                childrenMatrix={regionCellMatrix({ config })}
-                tableName={config.visualizationType}
-                caption='Table of the highlighted regions in the visualization'
-                headContent={
-                  <tr>
-                    <th>Region Name</th>
-                    <th>Start Date</th>
-                    <th>End Date</th>
-                  </tr>
-                }
-                tableOptions={{ className: 'region-table data-table' }}
-                fontSize={config.fontSize}
-              />
-            )}
+            {noRelativeRegions &&
+              config.regions &&
+              config.regions.length > 0 &&
+              config.visualizationType !== 'Box Plot' && (
+                <Table
+                  viewport={viewport}
+                  wrapColumns={wrapColumns}
+                  childrenMatrix={regionCellMatrix({ config })}
+                  tableName={config.visualizationType}
+                  caption='Table of the highlighted regions in the visualization'
+                  headContent={
+                    <tr>
+                      <th>Region Name</th>
+                      <th>Start Date</th>
+                      <th>End Date</th>
+                    </tr>
+                  }
+                  tableOptions={{ className: 'region-table data-table' }}
+                  fontSize={config.fontSize}
+                />
+              )}
           </div>
         </section>
         <div id={skipId} className='cdcdataviz-sr-only'>
@@ -248,7 +315,11 @@ const DataTable = (props: DataTableProps) => {
     // Render Data Table for Box Plots
     return (
       <ErrorBoundary component='DataTable'>
-        <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
+        <section
+          id={tabbingId.replace('#', '')}
+          className={`data-table-container ${viewport} w-100`}
+          aria-label={accessibilityLabel}
+        >
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
@@ -260,7 +331,12 @@ const DataTable = (props: DataTableProps) => {
               caption={caption}
               stickyHeader
               headContent={<BoxplotHeader categories={config.boxplot.categories} />}
-              tableOptions={{ className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}`, 'aria-live': 'assertive', 'aria-rowcount': 11, hidden: !expanded }}
+              tableOptions={{
+                className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}`,
+                'aria-live': 'assertive',
+                'aria-rowcount': 11,
+                hidden: !expanded
+              }}
               fontSize={config.fontSize}
             />
           </div>

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -1,4 +1,4 @@
-import LegendCircle from '@cdc/core/components/LegendCircle'
+import LegendShape from '@cdc/core/components/LegendShape'
 import { customSort } from './customSort'
 import { getSeriesName } from './getSeriesName'
 import { DataTableProps } from '../DataTable'
@@ -16,7 +16,7 @@ type ChartRowsProps = DataTableProps & {
   hasRowType?: boolean
 }
 
-const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, hasRowType, viewport }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, hasRowType }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
   const groupBy = config.table?.groupBy
   const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
 
@@ -74,7 +74,7 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
         config.visualizationType !== 'Pie'
           ? [
               <>
-                {colorScale && colorScale(seriesName) && <LegendCircle viewport={viewport} fill={colorScale(seriesName)} />}
+                {colorScale && colorScale(seriesName) && <LegendShape fill={colorScale(seriesName)} />}
                 {seriesName}
               </>
             ]

package/components/DataTable/helpers/getChartCellValue.ts

@@ -63,7 +63,7 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
     const barSeriesExist = config.runtime?.barSeriesKeys?.includes(column)
     const lineSeriesExist = config.runtime?.lineSeriesKeys?.includes(column)
     const showSymbol = config.general.showSuppressedSymbol
-    if (isValueMatch && isColumnMatch && pd.displayTable && pd.type === 'suppression') {
+    if (isValueMatch && isColumnMatch && pd.displayTable && pd.type === 'suppression' && config.visualizationSubType !== 'stacked') {
       switch (config.visualizationType) {
         case 'Combo':
           cellValue = barSeriesExist && showSymbol ? pd.iconCode : lineSeriesExist && showSymbol ? pd.lineCode : ''

package/components/DataTable/helpers/getDataSeriesColumns.ts

@@ -11,8 +11,8 @@ export const getDataSeriesColumns = (config: TableConfig, isVertical: boolean, r
   let tmpSeriesColumns: string[] = []
   if (config.visualizationType !== 'Pie') {
     tmpSeriesColumns = isVertical ? [config.xAxis?.dataKey] : [] //, ...config.runtime.seriesLabelsAll
-    if (config.series) {
-      config.series.forEach(element => {
+    if (config.runtime?.series) {
+      config.runtime?.series.forEach(element => {
         tmpSeriesColumns.push(element.dataKey)
       })
     } else if (runtimeData && runtimeData.length > 0) {

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -1,4 +1,4 @@
-import LegendCircle from '@cdc/core/components/LegendCircle'
+import LegendShape from '@cdc/core/components/LegendShape'
 import CellAnchor from '../components/CellAnchor'
 import { DataTableProps } from '../DataTable'
 import { ReactNode } from 'react'
@@ -7,7 +7,7 @@ type MapRowsProps = DataTableProps & {
   rows: string[]
 }
 
-const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode, viewport }: MapRowsProps): ReactNode[][] => {
+const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode }: MapRowsProps): ReactNode[][] => {
   return rows.map(row =>
     Object.keys(columns)
       .filter(column => columns[column].dataTable === true && columns[column].name)
@@ -31,7 +31,7 @@ const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, di
           }
           cellValue = (
             <div className='col-12'>
-              <LegendCircle viewport={viewport} fill={legendColor[0]} />
+              <LegendShape fill={legendColor[0]} />
               <CellAnchor markup={labelValue} row={rowObj} columns={columns} navigationHandler={navigationHandler} mapZoomHandler={mapZoomHandler} />
             </div>
           )

package/components/DataTable/types/TableConfig.ts

@@ -2,7 +2,7 @@ import { Axis } from '../../../types/Axis'
 import { Runtime } from '../../../types/Runtime'
 import { Region } from '../../../types/Region'
 import { BoxPlot } from '../../../types/BoxPlot'
-import { PreliminaryDataItem } from '@cdc/chart/src/components/LineChart/LineChartProps'
+import { type PreliminaryDataItem } from '@cdc/chart/src/types/ChartConfig'
 import { Visualization } from '../../../types/Visualization'
 
 export type TableConfig = Visualization & {

package/components/EditorPanel/Inputs.tsx

@@ -9,6 +9,7 @@ export type Input = {
   subsection?: any
   updateField?: Function
   fieldName?: string
+  display?: boolean
 }
 
 export type TextFieldProps = {
@@ -39,7 +40,7 @@ export type SelectProps = {
 } & Input
 
 const TextField = memo((props: TextFieldProps) => {
-  const { label, tooltip, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'text', i = null, min = null, ...attributes } = props
+  const { display = true, label, tooltip, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'text', i = null, min = null, ...attributes } = props
   const [value, setValue] = useState(stateValue)
   const [debouncedValue] = useDebounce(value, 500)
 
@@ -76,6 +77,9 @@ const TextField = memo((props: TextFieldProps) => {
   if ('date' === type) {
     formElement = <input type='date' name={name} onChange={onChange} {...attributes} value={value} />
   }
+  if (!display) {
+    return <></>
+  }
 
   return (
     <label>
@@ -89,8 +93,10 @@ const TextField = memo((props: TextFieldProps) => {
 })
 
 const CheckBox = memo((props: CheckboxProps) => {
-  const { label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes } = props
-
+  const { display = true, label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes } = props
+  if (!display) {
+    return <></>
+  }
   return (
     <label className='checkbox column-heading'>
       <input
@@ -111,7 +117,7 @@ const CheckBox = memo((props: CheckboxProps) => {
 })
 
 const Select = memo((props: SelectProps) => {
-  const { label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, updateField, initial: initialValue, ...attributes } = props
+  const { display = true, label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, updateField, initial: initialValue, ...attributes } = props
   let optionsJsx = options.map((optionName, index) => (
     <option value={optionName} key={index}>
       {optionName}
@@ -125,6 +131,9 @@ const Select = memo((props: SelectProps) => {
       </option>
     )
   }
+  if (!display) {
+    return <></>
+  }
 
   return (
     <label>