@cdc/core 4.24.9 → 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 { VizFilter } from '../../types/VizFilter'
+import { filterSearchTerm, NestedOptions, ValueTextPair } from './nestedDropdownHelpers'
 
 const Options: React.FC<{
-  currentOptions: (string | number)[]
+  subOptions: ValueTextPair[]
+  filterIndex: number
   label: string
   handleSubGroupSelect: Function
   userSelectedLabel: string
   userSearchTerm: string
-}> = ({ currentOptions = [], 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,38 +27,61 @@ 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' ? handleSubGroupSelect(currentItem.dataset.value) : setIsTierOneExpanded(!isTierOneExpanded)
+      currentItem.className === `selectable-item-${filterIndex}`
+        ? handleSubGroupSelect(currentItem.dataset.value)
+        : setIsTierOneExpanded(!isTierOneExpanded)
     }
   }
 
   return (
     <>
-      <li role='treeitem' key={label} tabIndex={0} aria-label={label} onClick={handleGroupClick} onKeyUp={handleKeyUp} className='nested-dropdown-group'>
+      <li
+        role='treeitem'
+        key={label}
+        tabIndex={0}
+        aria-label={label}
+        onClick={handleGroupClick}
+        onKeyUp={handleKeyUp}
+        className={`nested-dropdown-group-${filterIndex}`}
+      >
         <span className={'font-weight-bold'}>{label} </span>
         {
           <span className='list-arrow' aria-hidden='true'>
-            {isTierOneExpanded ? <Icon display='caretFilledUp' /> : <Icon display='caretFilledDown' />}
+            {isTierOneExpanded ? (
+              <Icon display='caretFilledUp' alt='arrow pointing up' />
+            ) : (
+              <Icon display='caretFilledDown' alt='arrow pointing down' />
+            )}
           </span>
         }
-        <ul aria-expanded={isTierOneExpanded} role='group' tabIndex={-1} aria-labelledby={label} className={isTierOneExpanded ? '' : 'hide'}>
-          {currentOptions.map((tierTwo, tierTwoIndex) => {
-            const regionID = label + tierTwo
+        <ul
+          aria-expanded={isTierOneExpanded}
+          role='group'
+          tabIndex={-1}
+          aria-labelledby={label}
+          className={isTierOneExpanded ? '' : 'hide'}
+        >
+          {subOptions.map(subGroup => {
+            const [value, text] = subGroup
+            const subGroupText = text || value
+
+            const regionID = label + value
             const isSelected = regionID === userSelectedLabel
 
             return (
               <li
                 key={regionID}
-                className='selectable-item'
+                className={`selectable-item-${filterIndex}`}
                 tabIndex={0}
                 role='treeitem'
                 aria-label={regionID}
                 aria-selected={isSelected}
-                data-value={tierTwo}
+                data-value={value}
                 onClick={e => {
-                  handleSubGroupSelect(tierTwo)
+                  handleSubGroupSelect(value)
                 }}
               >
                 {isSelected ? (
@@ -68,7 +92,7 @@ const Options: React.FC<{
                   ''
                 )}
 
-                {tierTwo}
+                {subGroupText}
               </li>
             )
           })}
@@ -78,44 +102,47 @@ const Options: React.FC<{
   )
 }
 
-interface NestedDropdownProps {
+type NestedDropdownProps = {
+  activeGroup: string
+  activeSubGroup?: string
+  filterIndex: number
   isEditor?: boolean
-  currentFilter: VizFilter
+  isUrlFilter?: boolean
   listLabel: string
-  handleSelectedItems: Function
+  handleSelectedItems: ([group, subgroup]: [string, string]) => void
+  options: NestedOptions
+  subGroupingActive?: string
 }
 
-type OptionsMemo = [string, (string | number)[]][]
-
-const NestedDropdown: React.FC<NestedDropdownProps> = ({ currentFilter, listLabel, handleSelectedItems }) => {
-  const optsMemo: OptionsMemo = useMemo(() => {
-    // keep custom ordered value order
-    const values = currentFilter.orderedValues?.filter(value => currentFilter.values.includes(value)) || currentFilter.values
-    return values.map(value => {
-      if (!currentFilter.subGrouping) return [value, []]
-      const { orderedValues, values } = currentFilter.subGrouping.valuesLookup[value]
-      const subFilterValues = orderedValues?.filter(value => values.includes(value)) || values
-      return [value, subFilterValues]
-    })
-  }, [currentFilter, currentFilter.subGrouping])
-  const groupFilterActive = currentFilter.active
-  const subGroupFilterActive = currentFilter.subGrouping?.active ?? ''
+const NestedDropdown: React.FC<NestedDropdownProps> = ({
+  options,
+  activeGroup,
+  activeSubGroup,
+  filterIndex,
+  listLabel,
+  handleSelectedItems
+}) => {
+  const dropdownId = useId()
+  const groupFilterActive = activeGroup
+  const subGroupFilterActive = activeSubGroup || ''
 
   const [userSearchTerm, setUserSearchTerm] = useState('')
-  const [inputValue, setInputValue] = useState(subGroupFilterActive !== '' ? `${groupFilterActive} - ${subGroupFilterActive}` : 'Select an Option')
+  const [inputValue, setInputValue] = useState(
+    subGroupFilterActive !== '' ? `${groupFilterActive} - ${subGroupFilterActive}` : ''
+  )
   const [inputHasFocus, setInputHasFocus] = useState(false)
   const [isListOpened, setIsListOpened] = useState(false)
 
   const searchInput = useRef(null)
   const searchDropdown = useRef(null)
 
-  const chooseSelectedSubGroup = (tierOne: string, tierTwo: string) => {
+  const chooseSelectedSubGroup = (tierOne: string | number, tierTwo: string | number) => {
     searchInput.current.focus()
     const selectedItemValue = `${tierOne} - ${tierTwo}`
     setUserSearchTerm('')
     setIsListOpened(false)
     setInputValue(selectedItemValue)
-    handleSelectedItems([tierOne, tierTwo])
+    handleSelectedItems([String(tierOne), String(tierTwo)])
   }
 
   const handleKeyUp = e => {
@@ -127,7 +154,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({ currentFilter, listLabe
           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()
@@ -152,13 +179,14 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({ currentFilter, listLabe
             // 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()
         } else if (previousSibling) {
           // Move focus to previous collapsed Tier One or Move focus from Tier One to the last of the previous Tier Two's items
-          const itemToFocusOnAfterKeyUp = previousSibling.lastChild.className === 'hide' ? previousSibling : previousSibling.lastChild.lastChild
+          const itemToFocusOnAfterKeyUp =
+            previousSibling.lastChild.className === 'hide' ? previousSibling : previousSibling.lastChild.lastChild
           itemToFocusOnAfterKeyUp.focus()
         } else {
           // Move focus from top of the dropdown to Input
@@ -190,11 +218,9 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({ currentFilter, listLabe
     }
   }
 
-  const filterOptions: OptionsMemo = useMemo(() => {
-    if (!userSearchTerm) return optsMemo
-    const newRegex = new RegExp(`^${userSearchTerm}`, 'i')
-    return optsMemo.filter(([tierOne, tierTwo]) => tierOne.match(newRegex) || tierTwo.some(value => String(value).match(newRegex)))
-  }, [userSearchTerm])
+  const filterOptions = useMemo(() => {
+    return filterSearchTerm(userSearchTerm, options)
+  }, [userSearchTerm, options])
 
   const handleSearchTermChange = e => {
     const newSearchTerm = e.target.value
@@ -203,11 +229,35 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({ currentFilter, listLabe
     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 (
     <>
-      <div id='nested-dropdown-container' className='nested-dropdown' onKeyUp={handleKeyUp}>
+      {listLabel && (
+        <label className='text-capitalize font-weight-bold' htmlFor={dropdownId}>
+          {listLabel}
+        </label>
+      )}
+      <div
+        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'
@@ -216,26 +266,38 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({ currentFilter, listLabe
             tabIndex={0}
             value={inputValue}
             onChange={handleSearchTermChange}
-            placeholder={'Select or type to search'}
+            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' /> : <Icon display='caretFilledDown' />}
+            <Icon display='caretDown' />
           </span>
         </div>
-        <ul role='tree' key={listLabel} tabIndex={-1} aria-labelledby='main-nested-dropdown' aria-expanded={isListOpened} ref={searchDropdown} className={`main-nested-dropdown-container ${isListOpened ? '' : 'hide'}`}>
-          {filterOptions?.length
-            ? filterOptions.map(([groupName, options]) => {
+        <ul
+          role='tree'
+          key={listLabel}
+          tabIndex={-1}
+          aria-labelledby='main-nested-dropdown'
+          aria-expanded={isListOpened}
+          ref={searchDropdown}
+          className={`main-nested-dropdown-container ${isListOpened ? '' : 'hide'}`}
+        >
+          {filterOptions.length
+            ? filterOptions.map(([group, subgroup], index) => {
+                const [groupValue, groupText] = group
+                const groupTextValue = String(groupText || groupValue)
                 return (
                   <Options
-                    currentOptions={options}
-                    label={groupName}
-                    handleSubGroupSelect={(subGroupValue: string) => {
-                      chooseSelectedSubGroup(groupName, subGroupValue)
+                    key={groupTextValue + '_' + index}
+                    subOptions={subgroup}
+                    filterIndex={filterIndex}
+                    label={groupTextValue}
+                    handleSubGroupSelect={subGroupValue => {
+                      chooseSelectedSubGroup(groupValue, subGroupValue)
                     }}
                     userSelectedLabel={groupFilterActive + subGroupFilterActive}
                     userSearchTerm={userSearchTerm}

package/components/NestedDropdown/nestedDropdownHelpers.ts

@@ -0,0 +1,34 @@
+import _ from 'lodash'
+
+export type ValueTextPair = [string | number, string | number | undefined] | [string | number] // [value, text]
+
+export type NestedOptions = Array<[ValueTextPair, ValueTextPair[]]>
+
+export const filterSearchTerm = (userSearchTerm: string, optsMemo: NestedOptions): NestedOptions => {
+  if (userSearchTerm === undefined || userSearchTerm === '') return optsMemo || ([] as NestedOptions)
+  const newRegex = new RegExp(`^${userSearchTerm}`, 'i')
+  const newOptsMemoTierOneFiltered = optsMemo.filter(([group, subGroups]) => {
+    const [groupValue, groupText] = group
+    const _groupText = String(groupText || groupValue)
+    return (
+      _groupText.match(newRegex) ||
+      subGroups.some(([value, text]) => {
+        const subGroupText = String(text || value)
+        return subGroupText.match(newRegex)
+      })
+    )
+  })
+
+  const filterOptions: NestedOptions = newOptsMemoTierOneFiltered.map(([group, subGroups]) => {
+    const [groupValue, groupText] = group
+    const _groupText = String(groupText || groupValue)
+    if (_groupText.match(newRegex)) return [group, subGroups]
+    const newOptions = subGroups.filter(([value, text]) => {
+      const subGroupText = text || value
+      return String(subGroupText).match(newRegex)
+    })
+    return [group, newOptions]
+  })
+
+  return filterOptions
+}

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -1,5 +1,12 @@
+.cdc-dashboard-inner-container.cove-component__content.cove-dashboard-filters-container:has(
+    > .nested-dropdown.open-filter
+  )
+  :has(> .nested-dropdown-container) {
+  z-index: 9;
+}
+
 .nested-dropdown {
-  .nested-dropdown-group {
+  [class^='nested-dropdown-group-'] {
     list-style: none;
   }
 
@@ -8,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;
@@ -38,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;
     }
   }
 
@@ -55,7 +63,8 @@
     overflow-y: scroll;
     position: absolute;
     z-index: 3;
-    width: 325px;
+    min-width: 200px;
+    background: white;
   }
 
   .hide {

package/components/NestedDropdown/tests/nestedDropdownHelpers.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from 'vitest'
+import { filterSearchTerm, NestedOptions } from '../nestedDropdownHelpers'
+
+describe('filterSearchTerm()', () => {
+  const optsMemo: NestedOptions = [
+    [['Fruits'], [['Apple'], ['Cantaloupe'], ['Orange'], ['Tomato']]],
+    [['Vegetables'], [['Spinach'], ['Broccoli'], ['Carrot'], ['Tomato']]],
+    [
+      ['Fungi', 'Mushrooms'],
+      [['Portobello', 'Mushroom 1'], ['Morel, Mushroom 2'], ['Chanterelle', 'Mushroom 3']]
+    ]
+  ]
+  it('Return the original OptsMemo when there is no search term', () => {
+    const result = filterSearchTerm('', optsMemo)
+    expect(result).toEqual(optsMemo)
+    const result2 = filterSearchTerm(undefined, optsMemo)
+    expect(result2).toEqual(optsMemo)
+  })
+  it('Return the empty array if there is no match to search term', () => {
+    const result = filterSearchTerm('Pizza', optsMemo)
+    expect(result).toEqual([])
+  })
+  it('Filter out the top level groupings', () => {
+    const result = filterSearchTerm('', optsMemo)
+    expect(result).toEqual(optsMemo)
+    const result2 = filterSearchTerm('fruit', optsMemo)
+    const expectedResult2: NestedOptions = [[['Fruits'], [['Apple'], ['Cantaloupe'], ['Orange'], ['Tomato']]]]
+    expect(result2).toEqual(expectedResult2)
+    const result3 = filterSearchTerm('VEG', optsMemo)
+    const expectedResult3: NestedOptions = [[['Vegetables'], [['Spinach'], ['Broccoli'], ['Carrot'], ['Tomato']]]]
+    expect(result3).toEqual(expectedResult3)
+    const result4 = filterSearchTerm('mush', optsMemo)
+    const expectedResult4: NestedOptions = [
+      [
+        ['Fungi', 'Mushrooms'],
+        [['Portobello', 'Mushroom 1'], ['Morel, Mushroom 2'], ['Chanterelle', 'Mushroom 3']]
+      ]
+    ]
+    expect(result4).toEqual(expectedResult4)
+  })
+  it('Filter out the subvalues', () => {
+    const result = filterSearchTerm('ap', optsMemo)
+    const expectedResult: NestedOptions = [[['Fruits'], [['Apple']]]]
+    expect(result).toEqual(expectedResult)
+    const result2 = filterSearchTerm('ca', optsMemo)
+    const expectedResult2: NestedOptions = [
+      [['Fruits'], [['Cantaloupe']]],
+      [['Vegetables'], [['Carrot']]]
+    ]
+    expect(result2).toEqual(expectedResult2)
+    const result3 = filterSearchTerm('tomato', optsMemo)
+    const expectedResult3: NestedOptions = [
+      [['Fruits'], [['Tomato']]],
+      [['Vegetables'], [['Tomato']]]
+    ]
+    expect(result3).toEqual(expectedResult3)
+  })
+})

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/Table/components/GroupRow.tsx

@@ -8,7 +8,7 @@ type GroupRowProps = {
 
 const GroupRow = ({ label, colSpan, data }: GroupRowProps) => {
   return (
-    <tr>
+    <tr className='row-group'>
       <th scope='colgroup' colSpan={colSpan}>
         {label}
       </th>

package/components/_stories/BlurStrokeTest.stories.tsx

@@ -0,0 +1,27 @@
+import { a } from 'vitest/dist/suite-IbNSsUWN'
+import { BlurStrokeText } from '../BlurStrokeText'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof BlurStrokeText> = {
+  title: 'Components/Atoms/BlurStrokeText',
+  component: BlurStrokeText
+}
+
+export default meta
+
+type Story = StoryObj<typeof BlurStrokeText>
+
+export const Default: Story = {
+  render: args => (
+    <svg width='300' height='100' style={{ backgroundColor: '#464646' }}>
+      <BlurStrokeText {...args}>A feathered stroke option</BlurStrokeText>
+    </svg>
+  ),
+  args: {
+    fontSize: 15,
+    y: 50,
+    x: 50,
+    blurRadius: 1,
+    disableStroke: false
+  }
+}