@cdc/core 4.24.10 → 4.24.11

package/components/NestedDropdown/NestedDropdown.tsx

@@ -1,15 +1,16 @@
-import { useState, useEffect, useRef, useMemo } from 'react'
+import { useState, useEffect, useRef, useMemo, useId } from 'react'
 import './nesteddropdown.styles.css'
 import Icon from '@cdc/core/components/ui/Icon'
 import { filterSearchTerm, NestedOptions, ValueTextPair } from './nestedDropdownHelpers'
 
 const Options: React.FC<{
   subOptions: ValueTextPair[]
+  filterIndex: number
   label: string
   handleSubGroupSelect: Function
   userSelectedLabel: string
   userSearchTerm: string
-}> = ({ subOptions, label, handleSubGroupSelect, userSelectedLabel, userSearchTerm }) => {
+}> = ({ subOptions, filterIndex, label, handleSubGroupSelect, userSelectedLabel, userSearchTerm }) => {
   const [isTierOneExpanded, setIsTierOneExpanded] = useState(true)
   const checkMark = <>&#10004;</>
 
@@ -18,7 +19,7 @@ const Options: React.FC<{
   }, [userSearchTerm])
 
   const handleGroupClick = e => {
-    const leaveExpanded = e.target.className === 'selectable-item' ? true : !isTierOneExpanded
+    const leaveExpanded = e.target.className === `selectable-item-${filterIndex}` ? true : !isTierOneExpanded
     setIsTierOneExpanded(leaveExpanded)
   }
 
@@ -26,10 +27,10 @@ const Options: React.FC<{
     const currentItem = e.target
     if (e.key === 'ArrowRight') setIsTierOneExpanded(true)
     else if (e.key === 'ArrowLeft') {
-      if (currentItem.className === 'selectable-item') currentItem.parentNode.parentNode.focus()
+      if (currentItem.className === `selectable-item-${filterIndex}`) currentItem.parentNode.parentNode.focus()
       setIsTierOneExpanded(false)
     } else if (e.key === 'Enter') {
-      currentItem.className === 'selectable-item'
+      currentItem.className === `selectable-item-${filterIndex}`
         ? handleSubGroupSelect(currentItem.dataset.value)
         : setIsTierOneExpanded(!isTierOneExpanded)
     }
@@ -44,7 +45,7 @@ const Options: React.FC<{
         aria-label={label}
         onClick={handleGroupClick}
         onKeyUp={handleKeyUp}
-        className='nested-dropdown-group'
+        className={`nested-dropdown-group-${filterIndex}`}
       >
         <span className={'font-weight-bold'}>{label} </span>
         {
@@ -73,7 +74,7 @@ const Options: React.FC<{
             return (
               <li
                 key={regionID}
-                className='selectable-item'
+                className={`selectable-item-${filterIndex}`}
                 tabIndex={0}
                 role='treeitem'
                 aria-label={regionID}
@@ -104,6 +105,7 @@ const Options: React.FC<{
 type NestedDropdownProps = {
   activeGroup: string
   activeSubGroup?: string
+  filterIndex: number
   isEditor?: boolean
   isUrlFilter?: boolean
   listLabel: string
@@ -116,9 +118,11 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
   options,
   activeGroup,
   activeSubGroup,
+  filterIndex,
   listLabel,
   handleSelectedItems
 }) => {
+  const dropdownId = useId()
   const groupFilterActive = activeGroup
   const subGroupFilterActive = activeSubGroup || ''
 
@@ -150,7 +154,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
           setIsListOpened(true)
           // Move focus from Input to top of dropdown
           Dropdown.firstChild.focus()
-        } else if (className === 'selectable-item') {
+        } else if (className === `selectable-item-${filterIndex}`) {
           // Move focus to next item on list: next Tier Two item or the next Tier One or SearchInput
           const itemToFocusOnAfterKeyUp = nextSibling ?? parentNode.parentNode.nextSibling ?? searchInput.current
           itemToFocusOnAfterKeyUp.focus()
@@ -175,7 +179,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
             // Move focus to last item of the last collapsed Tier Two in dropdown
             Dropdown.lastChild.lastChild.lastChild.focus()
           }
-        } else if (className === 'selectable-item') {
+        } else if (className === `selectable-item-${filterIndex}`) {
           // Move focus to previous Tier Two or Move focus to current Tier One
           const itemToFocusOnAfterKeyUp = previousSibling ?? parentNode.parentNode
           itemToFocusOnAfterKeyUp.focus()
@@ -214,7 +218,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
     }
   }
 
-  const filterOptions: OptionsMemo = useMemo(() => {
+  const filterOptions = useMemo(() => {
     return filterSearchTerm(userSearchTerm, options)
   }, [userSearchTerm, options])
 
@@ -225,16 +229,35 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
     setInputValue(newSearchTerm)
   }
 
+  const handleOnBlur = e => {
+    if (
+      e.relatedTarget === null ||
+      ![
+        `nested-dropdown-${filterIndex}`,
+        `nested-dropdown-group-${filterIndex}`,
+        `selectable-item-${filterIndex}`
+      ].includes(e.relatedTarget.className)
+    ) {
+      setInputHasFocus(false)
+      setIsListOpened(false)
+    }
+  }
+
   return (
     <>
-      {listLabel && <span className='edit-label column-heading'>{listLabel}</span>}
+      {listLabel && (
+        <label className='text-capitalize font-weight-bold' htmlFor={dropdownId}>
+          {listLabel}
+        </label>
+      )}
       <div
-        id='nested-dropdown-container'
-        className={`nested-dropdown ${isListOpened ? 'open-filter' : ''}`}
+        id={dropdownId}
+        className={`nested-dropdown nested-dropdown-${filterIndex} ${isListOpened ? 'open-filter' : ''}`}
         onKeyUp={handleKeyUp}
       >
         <div className='nested-dropdown-input-container' aria-label='searchInput' role='textbox'>
           <input
+            id={`nested-dropdown-${filterIndex}`}
             className='search-input'
             ref={searchInput}
             aria-label='searchInput'
@@ -243,19 +266,15 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
             tabIndex={0}
             value={inputValue}
             onChange={handleSearchTermChange}
-            placeholder={'Select an Option'}
+            placeholder={'- Select -'}
             onClick={() => {
               if (inputHasFocus) setIsListOpened(!isListOpened)
             }}
             onFocus={() => setInputHasFocus(true)}
-            onBlur={() => setInputHasFocus(false)}
+            onBlur={e => handleOnBlur(e)}
           />
           <span className='list-arrow' aria-hidden={true}>
-            {isListOpened ? (
-              <Icon display='caretFilledUp' alt='arrow pointing up' />
-            ) : (
-              <Icon display='caretFilledDown' alt='arrow pointing down' />
-            )}
+            <Icon display='caretDown' />
           </span>
         </div>
         <ul
@@ -275,6 +294,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
                   <Options
                     key={groupTextValue + '_' + index}
                     subOptions={subgroup}
+                    filterIndex={filterIndex}
                     label={groupTextValue}
                     handleSubGroupSelect={subGroupValue => {
                       chooseSelectedSubGroup(groupValue, subGroupValue)

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -6,7 +6,7 @@
 }
 
 .nested-dropdown {
-  .nested-dropdown-group {
+  [class^='nested-dropdown-group-'] {
     list-style: none;
   }
 
@@ -15,19 +15,19 @@
     position: relative;
     display: inline-block;
     width: 100%;
+    padding: 0;
   }
 
   .main-nested-dropdown-container,
   .nested-dropdown-input-container {
-    padding: 7px 15px;
-    background: #fff;
     border: 1px solid var(--lightGray);
-    border-radius: 5px;
-    width: 325px;
+    min-width: 200px;
     cursor: pointer;
+    padding: 0.375rem 0.75rem;
+    font-size: 1em;
   }
 
-  .selectable-item {
+  [class^='selectable-item-'] {
     list-style: none;
     padding-left: 20px;
     position: relative;
@@ -45,15 +45,16 @@
   }
 
   .nested-dropdown-input-container {
+    display: block;
+    width: 100%;
+    border-radius: 0.25rem;
     position: relative;
     & > span.list-arrow {
+      color: var(--mediumGray);
       position: absolute;
-      font-size: 10px;
-      top: 4px;
-      right: 12px;
-      padding: 9px;
-      background: #fff;
-      pointer-events: none;
+      top: 9px;
+      right: 1px;
+      float: right;
     }
   }
 
@@ -62,7 +63,8 @@
     overflow-y: scroll;
     position: absolute;
     z-index: 3;
-    width: 325px;
+    min-width: 200px;
+    background: white;
   }
 
   .hide {

package/components/Table/Table.tsx

@@ -4,9 +4,11 @@ import GroupRow from './components/GroupRow'
 import { CellMatrix, GroupCellMatrix } from './types/CellMatrix'
 import { RowType } from './types/RowType'
 import { PreliminaryDataItem } from '@cdc/chart/src/types/ChartConfig'
+import _ from 'lodash'
 
 type TableProps = {
   childrenMatrix: CellMatrix | GroupCellMatrix
+  noData?: boolean
   tableName: string
   caption: string
   stickyHeader?: boolean
@@ -27,46 +29,112 @@ type TableProps = {
 
 type Position = 'sticky'
 
-const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent, tableOptions, wrapColumns, hasRowType, fontSize, viewport, preliminaryData }: TableProps) => {
+const Table = ({
+  childrenMatrix,
+  noData,
+  tableName,
+  caption,
+  stickyHeader,
+  headContent,
+  tableOptions,
+  wrapColumns,
+  hasRowType,
+  fontSize,
+  viewport,
+  preliminaryData
+}: TableProps) => {
   const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 2 } : {}
   const isGroupedMatrix = !Array.isArray(childrenMatrix)
 
   return (
     <table {...tableOptions}>
       <caption className='visually-hidden'>{caption}</caption>
-      <thead style={headStyle}>{headContent}</thead>
-      <tbody>
-        {isGroupedMatrix
-          ? Object.keys(childrenMatrix).flatMap(groupName => {
-              let colSpan = 0
-              const rows = childrenMatrix[groupName].map((row, i) => {
-                colSpan = row.length
-                const key = `${tableName}-${groupName}-row-${i}`
-                return <Row preliminaryData={preliminaryData} key={key} rowKey={key} childRow={row} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
-              })
-              return [<GroupRow label={groupName} colSpan={colSpan} key={`${tableName}-${groupName}`} />, ...rows]
-            })
-          : childrenMatrix.map((childRow, i) => {
-              let childRowCopy = [...childRow]
-              let rowType = undefined
-              if (hasRowType) rowType = childRowCopy.shift()
-              const key = `${tableName}-row-${i}`
-              if (rowType === undefined) {
-                return <Row preliminaryData={preliminaryData} key={key} rowKey={key} childRow={childRow} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
-              } else {
-                switch (rowType) {
-                  case RowType.row_group:
-                    return <GroupRow label={childRowCopy[0]} colSpan={childRowCopy.length} key={key} />
-                  case RowType.total:
-                    return <Row preliminaryData={preliminaryData} key={key} rowKey={key} childRow={childRowCopy} isTotal={true} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
-                  case RowType.row_group_total:
-                    return <GroupRow label={childRowCopy[0]} colSpan={1} key={key} data={childRowCopy.slice(1)} />
-                  default:
-                    return <Row preliminaryData={preliminaryData} key={key} rowKey={key} childRow={childRowCopy} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
-                }
-              }
-            })}
-      </tbody>
+      {noData ? (
+        <tr>
+          <td className='py-5 text-center'>No Data</td>
+        </tr>
+      ) : (
+        <>
+          <thead style={headStyle}>{headContent}</thead>
+          <tbody>
+            {isGroupedMatrix
+              ? Object.keys(childrenMatrix).flatMap(groupName => {
+                  let colSpan = 0
+                  const rows = childrenMatrix[groupName].map((row, i) => {
+                    colSpan = row.length
+                    const key = `${tableName}-${groupName}-row-${i}`
+                    return (
+                      <Row
+                        preliminaryData={preliminaryData}
+                        key={key}
+                        rowKey={key}
+                        childRow={row}
+                        wrapColumns={wrapColumns}
+                        cellMinWidth={tableOptions.cellMinWidth}
+                        fontSize={fontSize}
+                        viewport={viewport}
+                      />
+                    )
+                  })
+                  return [<GroupRow label={groupName} colSpan={colSpan} key={`${tableName}-${groupName}`} />, ...rows]
+                })
+              : childrenMatrix.map((childRow, i) => {
+                  let childRowCopy = [...childRow]
+                  let rowType = undefined
+                  if (hasRowType) rowType = childRowCopy.shift()
+                  const key = `${tableName}-row-${i}`
+                  if (rowType === undefined) {
+                    return (
+                      <Row
+                        preliminaryData={preliminaryData}
+                        key={key}
+                        rowKey={key}
+                        childRow={childRow}
+                        wrapColumns={wrapColumns}
+                        cellMinWidth={tableOptions.cellMinWidth}
+                        fontSize={fontSize}
+                        viewport={viewport}
+                      />
+                    )
+                  } else {
+                    switch (rowType) {
+                      case RowType.row_group:
+                        return <GroupRow label={childRowCopy[0]} colSpan={childRowCopy.length} key={key} />
+                      case RowType.total:
+                        return (
+                          <Row
+                            preliminaryData={preliminaryData}
+                            key={key}
+                            rowKey={key}
+                            childRow={childRowCopy}
+                            isTotal={true}
+                            wrapColumns={wrapColumns}
+                            cellMinWidth={tableOptions.cellMinWidth}
+                            fontSize={fontSize}
+                            viewport={viewport}
+                          />
+                        )
+                      case RowType.row_group_total:
+                        return <GroupRow label={childRowCopy[0]} colSpan={1} key={key} data={childRowCopy.slice(1)} />
+                      default:
+                        return (
+                          <Row
+                            preliminaryData={preliminaryData}
+                            key={key}
+                            rowKey={key}
+                            childRow={childRowCopy}
+                            wrapColumns={wrapColumns}
+                            cellMinWidth={tableOptions.cellMinWidth}
+                            fontSize={fontSize}
+                            viewport={viewport}
+                          />
+                        )
+                    }
+                  }
+                })}
+          </tbody>
+        </>
+      )}
     </table>
   )
 }

package/components/_stories/DataTable.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'
 
 import DataTable from '../DataTable'
 import './styles.scss'
+import NoDataConfig from './_mocks/DataTable/no-data.json'
 import Example_1 from './_mocks/dashboard_no_filter.json'
 import CityStateExample from './_mocks/example-city-state.json'
 import { displayGeoName } from '@cdc/map/src/helpers/displayGeoName'
@@ -62,6 +63,19 @@ export const Grouped: Story = {
   }
 }
 
+const noDataData = NoDataConfig.datasets['dev-8931-hide-markup-include.csv'].data
+export const NoData: Story = {
+  args: {
+    config: NoDataConfig,
+    dataConfig: { data: noDataData },
+    rawData: noDataData,
+    runtimeData: noDataData,
+    expandDataTable: true,
+    tableTitle: 'No Data Table',
+    viewport: 'lg',
+    tabbingId: '#asdf'
+  }
+}
 export const RowType: Story = {
   args: {
     config: {

package/components/_stories/Filters.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import Filters from '../Filters'
+import { VizFilter } from '../../types/VizFilter'
+import { faker } from '@faker-js/faker'
+import _ from 'lodash'
+import { Visualization } from '../../types/Visualization'
+
+const meta: Meta<typeof Filters> = {
+  title: 'Components/Molecules/Visualization Filters',
+  component: Filters
+}
+
+type Story = StoryObj<typeof Filters>
+
+faker.seed(123)
+
+const animalData = _.times(7, () => ({ bear: faker.animal.bear(), cat: faker.animal.cat(), cow: faker.animal.cow() }))
+const generateFilters = filterStyle => {
+  return ['bear', 'cat', 'cow'].map(columnName => {
+    return {
+      filterStyle,
+      label: columnName.toUpperCase(),
+      columnName
+    } as VizFilter
+  })
+}
+
+const generateConfig = filterStyle =>
+  ({
+    args: {
+      config: {
+        filters: generateFilters(filterStyle),
+        data: animalData
+      } as Visualization,
+      filteredData: animalData,
+      setFilteredData: () => {},
+      setConfig: () => {},
+      exclusions: []
+    }
+  } as Story)
+
+export const Dropdown: Story = generateConfig('dropdown')
+
+export const DropdownBar: Story = generateConfig('dropdown bar')
+
+export const MultiSelect: Story = generateConfig('multi-select')
+
+export const NestedDropdown: Story = generateConfig('nested-dropdown')
+
+export const Pill: Story = generateConfig('pill')
+
+export const Tab: Story = generateConfig('tab')
+
+export const TabBar: Story = generateConfig('tab bar')
+
+export default meta

package/components/_stories/_mocks/DataTable/no-data.json

@@ -0,0 +1,108 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": []
+  },
+  "rows": [
+    {
+      "columns": [
+        {
+          "width": 12,
+          "widget": "table1730380781112"
+        }
+      ],
+      "uuid": 1730380998726
+    }
+  ],
+  "visualizations": {
+    "table1730380781112": {
+      "filters": [],
+      "filterBehavior": "Filter Change",
+      "newViz": false,
+      "openModal": true,
+      "uid": "table1730380781112",
+      "type": "table",
+      "table": {
+        "label": "Data Table",
+        "show": true,
+        "showDownloadUrl": false,
+        "showVertical": true,
+        "expanded": true,
+        "collapsible": true
+      },
+      "columns": {
+        "additionalColumn1": {
+          "label": "New Column",
+          "dataTable": true,
+          "tooltips": false,
+          "prefix": "",
+          "suffix": "",
+          "forestPlot": false,
+          "startingPoint": "0",
+          "forestPlotAlignRight": false,
+          "roundToPlace": 0,
+          "commas": false,
+          "showInViz": false,
+          "forestPlotStartingPoint": 0
+        },
+        "Class": {
+          "name": "Class",
+          "dataTable": false
+        },
+        "Data_Type": {
+          "name": "Data_Type",
+          "dataTable": false
+        },
+        "Question": {
+          "name": "Question",
+          "dataTable": false
+        },
+        "Response": {
+          "name": "Response",
+          "dataTable": false
+        },
+        "Topic": {
+          "name": "Topic",
+          "dataTable": false
+        }
+      },
+      "dataFormat": {},
+      "visualizationType": "table",
+      "dataDescription": {
+        "horizontal": false,
+        "series": false
+      },
+      "dataKey": "dev-8931-hide-markup-include.csv"
+    }
+  },
+  "table": {
+    "label": "Data Table",
+    "show": true,
+    "showDownloadUrl": false,
+    "showDownloadLinkBelow": true,
+    "showVertical": true
+  },
+  "newViz": true,
+  "datasets": {
+    "dev-8931-hide-markup-include.csv": {
+      "data": [],
+      "dataFileSize": 10023,
+      "dataFileName": "dev-8931-hide-markup-include.csv",
+      "dataFileSourceType": "file",
+      "dataFileFormat": "CSV",
+      "preview": true
+    }
+  },
+  "isResponsiveTicks": false,
+  "type": "dashboard",
+  "barThickness": "0.37",
+  "xAxis": {
+    "type": "categorical",
+    "size": 75,
+    "maxTickRotation": 45,
+    "labelOffset": 0
+  },
+  "runtime": {},
+  "version": "4.24.10",
+  "uuid": 1730380778769
+}

package/components/ui/Icon.tsx

@@ -88,15 +88,24 @@ type IconProps = {
   /* Returns icon data as plain svg */
   base?: boolean
   /* Sets alt text for the icon */
-  alt: string
+  alt?: string
   /* Override the width of the icon (scales height proportionally)*/
   size?: number
   /* Override the color of the icon */
   color?: string
-  style?: string
+  style?: object
+  className?: string // className attribute will be ignored.
 }
 
-const Icon: React.FC<IconProps> = ({ display = '', base = undefined, alt = '', size = undefined, color = undefined, style = undefined, ...attributes }) => {
+const Icon: React.FC<IconProps> = ({
+  display = '',
+  base = undefined,
+  alt = '',
+  size = undefined,
+  color = undefined,
+  style = undefined,
+  ...attributes
+}) => {
   const IconObj = iconHash[display] || null
 
   const filteredAttrs = { ...attributes }
@@ -112,10 +121,14 @@ const Icon: React.FC<IconProps> = ({ display = '', base = undefined, alt = '', s
   return (
     <>
       {base ? (
-        <IconObj title={alt} />
+        <IconObj title={alt || display} />
       ) : (
-        <span className={`cove-icon${attributes.className ? ' ' + attributes.className : ''}`} style={styles} {...filteredAttrs}>
-          <IconObj title={alt} />
+        <span
+          className={`cove-icon${attributes.className ? ' ' + attributes.className : ''}`}
+          style={styles}
+          {...filteredAttrs}
+        >
+          <IconObj title={alt || display} />
         </span>
       )}
     </>