@cdc/core 4.24.9 → 4.24.10

package/components/Filters/helpers/handleSorting.ts

@@ -0,0 +1,18 @@
+import _ from 'lodash'
+
+export const handleSorting = singleFilter => {
+  const singleFilterValues = _.cloneDeep(singleFilter.values)
+  if (singleFilter.order === 'cust' && singleFilter.filterStyle !== 'nested-dropdown') {
+    singleFilter.values = singleFilter.orderedValues?.length ? singleFilter.orderedValues : singleFilterValues
+    return singleFilter
+  }
+
+  const sort = (a, b) => {
+    const asc = singleFilter.order !== 'desc'
+    return String(asc ? a : b).localeCompare(String(asc ? b : a), 'en', { numeric: true })
+  }
+
+  singleFilter.values = singleFilterValues.sort(sort)
+
+  return singleFilter
+}

package/components/Filters/helpers/tests/applyQueuedActive.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest'
+import { applyQueuedActive } from '../applyQueuedActive'
+import { VIZ_FILTER_STYLE } from '../../Filters'
+import { SharedFilter } from '@cdc/dashboard/src/types/SharedFilter'
+
+describe('applyQueuedActive', () => {
+  it('should apply queuedActive to active and subGrouping.active for nestedDropdown filter style', () => {
+    const sharedFilter: SharedFilter = {
+      filterStyle: VIZ_FILTER_STYLE.nestedDropdown,
+      queuedActive: ['activeValue', 'subActiveValue'],
+      active: null,
+      subGrouping: {
+        active: null
+      }
+    }
+
+    applyQueuedActive(sharedFilter)
+
+    expect(sharedFilter.active).toBe('activeValue')
+    expect(sharedFilter.subGrouping.active).toBe('subActiveValue')
+    expect(sharedFilter.queuedActive).toBeUndefined()
+  })
+
+  it('should apply queuedActive to active for non-nestedDropdown filter style', () => {
+    const sharedFilter: SharedFilter = {
+      filterStyle: 'someOtherStyle',
+      queuedActive: 'activeValue',
+      active: null
+    }
+
+    applyQueuedActive(sharedFilter)
+
+    expect(sharedFilter.active).toBe('activeValue')
+    expect(sharedFilter.queuedActive).toBeUndefined()
+  })
+
+  it('should handle empty queuedActive for non-nestedDropdown filter style', () => {
+    const sharedFilter: SharedFilter = {
+      filterStyle: 'someOtherStyle',
+      queuedActive: null,
+      active: null
+    }
+
+    applyQueuedActive(sharedFilter)
+
+    expect(sharedFilter.active).toBeNull()
+    expect(sharedFilter.queuedActive).toBeUndefined()
+  })
+})

package/components/Filters/helpers/tests/getNestedOptions.test.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect } from 'vitest'
+import { getNestedOptions } from '../getNestedOptions'
+import { SubGrouping } from '../../../../types/VizFilter'
+import { NestedOptions } from '../../../NestedDropdown/nestedDropdownHelpers'
+
+describe('getNestedOptions', () => {
+  it('should return nested options when orderedValues is not provided', () => {
+    const params = {
+      values: ['value1', 'value2'],
+      subGrouping: null
+    }
+    const expectedOutput: NestedOptions = [
+      [['value1'], []],
+      [['value2'], []]
+    ]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+
+  it('should return nested options when orderedValues is provided', () => {
+    const params = {
+      orderedValues: ['value2', 'value1'],
+      values: ['value1', 'value2'],
+      subGrouping: null
+    }
+    const expectedOutput: NestedOptions = [
+      [['value2'], []],
+      [['value1'], []]
+    ]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+
+  it('should return nested options when subGrouping is not provided', () => {
+    const params = {
+      values: ['value1', 'value2'],
+      subGrouping: null
+    }
+    const expectedOutput: NestedOptions = [
+      [['value1'], []],
+      [['value2'], []]
+    ]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+
+  it('should return nested options when subGrouping is provided with nested values', () => {
+    const subGrouping: SubGrouping = {
+      valuesLookup: {
+        value1: {
+          orderedValues: ['subValue2', 'subValue1'],
+          values: ['subValue1', 'subValue2']
+        },
+        value2: {
+          orderedValues: null,
+          values: ['subValue3']
+        }
+      }
+    }
+    const params = {
+      orderedValues: ['value1', 'value2'],
+      values: ['value1', 'value2'],
+      subGrouping
+    }
+    const expectedOutput: NestedOptions = [
+      [['value1'], [['subValue2'], ['subValue1']]],
+      [['value2'], [['subValue3']]]
+    ]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+
+  it('should return nested options when subGrouping is provided without orderedValues', () => {
+    const subGrouping: SubGrouping = {
+      valuesLookup: {
+        value1: {
+          orderedValues: null,
+          values: ['subValue1', 'subValue2']
+        },
+        value2: {
+          orderedValues: null,
+          values: ['subValue3']
+        }
+      }
+    }
+    const params = {
+      orderedValues: ['value1', 'value2'],
+      values: ['value1', 'value2'],
+      subGrouping
+    }
+    const expectedOutput: NestedOptions = [
+      [['value1'], [['subValue1'], ['subValue2']]],
+      [['value2'], [['subValue3']]]
+    ]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+})

package/components/Filters/helpers/tests/handleSorting.test.ts

@@ -0,0 +1,68 @@
+import { describe, it, expect } from 'vitest'
+import { handleSorting } from '../handleSorting'
+import _ from 'lodash'
+
+describe('handleSorting', () => {
+  it('should use orderedValues when order is "cust" and filterStyle is not "nested-dropdown"', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      orderedValues: ['value1', 'value2', 'value3'],
+      order: 'cust',
+      filterStyle: 'someOtherStyle'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.values).toEqual(['value1', 'value2', 'value3'])
+  })
+
+  it('should sort values in ascending order by default', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      order: 'asc',
+      filterStyle: 'someOtherStyle'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.values).toEqual(['value1', 'value2', 'value3'])
+  })
+
+  it('should sort values in descending order when order is "desc"', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      order: 'desc',
+      filterStyle: 'someOtherStyle'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.values).toEqual(['value3', 'value2', 'value1'])
+  })
+
+  it('should not use orderedValues when filterStyle is "nested-dropdown"', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      orderedValues: ['value1', 'value2', 'value3'],
+      order: 'cust',
+      filterStyle: 'nested-dropdown'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.values).toEqual(['value1', 'value2', 'value3'])
+  })
+
+  it('should handle empty orderedValues when order is "cust"', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      orderedValues: [],
+      order: 'cust',
+      filterStyle: 'someOtherStyle'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.values).toEqual(['value3', 'value1', 'value2'])
+  })
+})

package/components/Filters/index.ts

@@ -0,0 +1,5 @@
+export { default } from './Filters'
+
+export { filterOrderOptions, filterStyleOptions, useFilters } from './Filters'
+
+export { handleSorting } from './helpers/handleSorting'

package/components/Layout/components/Sidebar/components/sidebar.styles.scss

@@ -1,5 +1,3 @@
-@import '@cdc/core/styles/v2/themes/_color-definitions.scss';
-
 .cdc-editor .configure .type-dashboard .sidebar {
   top: 0;
 }
@@ -210,7 +208,7 @@
 
       svg {
         width: 60px;
-        color: $blue;
+        color: var(--blue);
         margin-right: 1rem;
         height: 60px; // IE11
         path {

package/components/Legend/Legend.Gradient.tsx

@@ -3,6 +3,7 @@ import { Text } from '@visx/text'
 import { type ViewportSize, type MapConfig } from '@cdc/map/src/types/MapConfig'
 import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
 import { getGradientLegendWidth } from '@cdc/core/helpers/getGradientLegendWidth'
+import { getTextWidth } from '../../helpers/getTextWidth'
 import { DimensionsType } from '../../types/Dimensions'
 
 type CombinedConfig = MapConfig | ChartConfig
@@ -13,17 +14,9 @@ interface GradientProps {
   config: CombinedConfig
   dimensions: DimensionsType
   currentViewport: ViewportSize
-  getTextWidth: (text: string, font: string) => string
 }
 
-const LegendGradient = ({
-  labels,
-  colors,
-  config,
-  dimensions,
-  currentViewport,
-  getTextWidth
-}: GradientProps): JSX.Element => {
+const LegendGradient = ({ labels, colors, config, dimensions, currentViewport }: GradientProps): JSX.Element => {
   let [width] = dimensions
 
   const legendWidth = getGradientLegendWidth(width, currentViewport)

package/components/Loader/Loader.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useRef } from 'react'
+import './loader.styles.css'
+
+type LoaderProps = {
+  fullScreen?: boolean
+}
+
+const Spinner = () => (
+  <div className='spinner-border text-primary' role='status'>
+    <span className='sr-only'>Loading...</span>
+  </div>
+)
+
+const Loader: React.FC<LoaderProps> = ({ fullScreen = false }) => {
+  const backgroundRef = useRef(null)
+
+  useEffect(() => {
+    if (backgroundRef?.current) {
+      const backgroundHeight = backgroundRef.current.parentElement.clientHeight
+      backgroundRef.current.style.height = `${backgroundHeight}px`
+    }
+  }, [])
+
+  return fullScreen ? (
+    <div ref={backgroundRef} className='cove-loader fullscreen'>
+      <Spinner />
+    </div>
+  ) : (
+    <Spinner />
+  )
+}
+
+export default Loader

package/components/Loader/index.ts

@@ -0,0 +1 @@
+export { default } from './Loader'

package/components/Loader/loader.styles.css

@@ -0,0 +1,13 @@
+.cove-loader {
+  &.fullscreen {
+    background: rgba(255, 255, 255, 0.8);
+    position: absolute;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    z-index: 100;
+    & > * {
+      margin-top: 40vh;
+    }
+  }
+}

package/components/NestedDropdown/NestedDropdown.tsx

@@ -1,15 +1,15 @@
 import { useState, useEffect, useRef, useMemo } 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[]
   label: string
   handleSubGroupSelect: Function
   userSelectedLabel: string
   userSearchTerm: string
-}> = ({ currentOptions = [], label, handleSubGroupSelect, userSelectedLabel, userSearchTerm }) => {
+}> = ({ subOptions, label, handleSubGroupSelect, userSelectedLabel, userSearchTerm }) => {
   const [isTierOneExpanded, setIsTierOneExpanded] = useState(true)
   const checkMark = <>&#10004;</>
 
@@ -29,22 +29,45 @@ const Options: React.FC<{
       if (currentItem.className === 'selectable-item') 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'
+        ? 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'
+      >
         <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 (
@@ -55,9 +78,9 @@ const Options: React.FC<{
                 role='treeitem'
                 aria-label={regionID}
                 aria-selected={isSelected}
-                data-value={tierTwo}
+                data-value={value}
                 onClick={e => {
-                  handleSubGroupSelect(tierTwo)
+                  handleSubGroupSelect(value)
                 }}
               >
                 {isSelected ? (
@@ -68,7 +91,7 @@ const Options: React.FC<{
                   ''
                 )}
 
-                {tierTwo}
+                {subGroupText}
               </li>
             )
           })}
@@ -78,44 +101,44 @@ const Options: React.FC<{
   )
 }
 
-interface NestedDropdownProps {
+type NestedDropdownProps = {
+  activeGroup: string
+  activeSubGroup?: string
   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,
+  listLabel,
+  handleSelectedItems
+}) => {
+  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 => {
@@ -158,7 +181,8 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({ currentFilter, listLabe
           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
@@ -191,10 +215,8 @@ 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])
+    return filterSearchTerm(userSearchTerm, options)
+  }, [userSearchTerm, options])
 
   const handleSearchTermChange = e => {
     const newSearchTerm = e.target.value
@@ -205,7 +227,12 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({ currentFilter, listLabe
 
   return (
     <>
-      <div id='nested-dropdown-container' className='nested-dropdown' onKeyUp={handleKeyUp}>
+      {listLabel && <span className='edit-label column-heading'>{listLabel}</span>}
+      <div
+        id='nested-dropdown-container'
+        className={`nested-dropdown ${isListOpened ? 'open-filter' : ''}`}
+        onKeyUp={handleKeyUp}
+      >
         <div className='nested-dropdown-input-container' aria-label='searchInput' role='textbox'>
           <input
             className='search-input'
@@ -216,7 +243,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({ currentFilter, listLabe
             tabIndex={0}
             value={inputValue}
             onChange={handleSearchTermChange}
-            placeholder={'Select or type to search'}
+            placeholder={'Select an Option'}
             onClick={() => {
               if (inputHasFocus) setIsListOpened(!isListOpened)
             }}
@@ -224,18 +251,33 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({ currentFilter, listLabe
             onBlur={() => setInputHasFocus(false)}
           />
           <span className='list-arrow' aria-hidden={true}>
-            {isListOpened ? <Icon display='caretFilledUp' /> : <Icon display='caretFilledDown' />}
+            {isListOpened ? (
+              <Icon display='caretFilledUp' alt='arrow pointing up' />
+            ) : (
+              <Icon display='caretFilledDown' alt='arrow pointing down' />
+            )}
           </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}
+                    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,3 +1,10 @@
+.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 {
     list-style: none;