@cdc/core 4.24.10 → 4.24.12-2

package/components/Footnotes/FootnotesStandAlone.tsx

@@ -15,20 +15,33 @@ type StandAloneProps = {
   viewport?: ViewPort
 }
 
-const FootnotesStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, viewport, isEditor, updateConfig }) => {
+const FootnotesStandAlone: React.FC<StandAloneProps> = ({
+  visualizationKey,
+  config,
+  viewport,
+  isEditor,
+  updateConfig
+}) => {
   const updateField = updateFieldFactory<Footnote[]>(config, updateConfig)
   if (isEditor)
     return (
-      <EditorWrapper component={FootnotesStandAlone} visualizationKey={visualizationKey} visualizationConfig={config} updateConfig={updateConfig} type={'Footnotes'} viewport={viewport}>
+      <EditorWrapper
+        component={FootnotesStandAlone}
+        visualizationKey={visualizationKey}
+        visualizationConfig={config}
+        updateConfig={updateConfig}
+        type={'Footnotes'}
+        viewport={viewport}
+      >
         <FootnotesEditor key={visualizationKey} config={config} updateField={updateField} />
       </EditorWrapper>
     )
 
   // get the api footnotes from the config
   const apiFootnotes = useMemo(() => {
-    if (config.dataKey && config.dynamicFootnotes) {
+    const configData = config.formattedData || config.data
+    if (configData && config.dataKey && config.dynamicFootnotes) {
       const { symbolColumn, textColumn, orderColumn } = config.dynamicFootnotes
-      const configData = config.formattedData || config.data
       const _data = configData.map(row => _.pick(row, [symbolColumn, textColumn, orderColumn]))
       _data.sort((a, b) => a[orderColumn] - b[orderColumn])
       return _data.map(row => ({ symbol: row[symbolColumn], text: row[textColumn] }))

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

@@ -542,10 +542,6 @@
       font-weight: normal;
     }
 
-    .btn {
-      margin-top: 1em;
-    }
-
     .sort-list {
       list-style: none;
 

package/components/Layout/components/Visualization/visualizations.scss

@@ -1,6 +1,6 @@
 .cdc-open-viz-module {
   .cdc-chart-inner-container .cove-component__content {
-    padding: 25px 15px !important;
+    padding: 25px 15px 25px 0 !important;
   }
   &.isEditor {
     overflow: auto;

package/components/Legend/Legend.Gradient.tsx

@@ -1,11 +1,14 @@
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
-import { type ViewportSize, type MapConfig } from '@cdc/map/src/types/MapConfig'
+import { 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'
 
+const MARGIN = 1
+const BORDER_SIZE = 1
+const MOBILE_BREAKPOINT = 576
+
 type CombinedConfig = MapConfig | ChartConfig
 
 interface GradientProps {
@@ -13,30 +16,40 @@ interface GradientProps {
   colors: string[]
   config: CombinedConfig
   dimensions: DimensionsType
-  currentViewport: ViewportSize
+  parentPaddingToSubtract?: number
 }
 
-const LegendGradient = ({ labels, colors, config, dimensions, currentViewport }: GradientProps): JSX.Element => {
+const LegendGradient = ({
+  labels,
+  colors,
+  config,
+  dimensions,
+  parentPaddingToSubtract = 0
+}: GradientProps): JSX.Element => {
+  const { uid, legend, type } = config
+  const { tickRotation, position, style, subStyle, hideBorder } = legend
+
+  const isLinearBlocks = subStyle === 'linear blocks'
   let [width] = dimensions
 
-  const legendWidth = getGradientLegendWidth(width, currentViewport)
-  const uniqueID = `${config.uid}-${Date.now()}`
+  const smallScreen = width <= MOBILE_BREAKPOINT
+  const legendWidth = Number(width) - parentPaddingToSubtract - MARGIN * 2 - BORDER_SIZE * 2
+  const uniqueID = `${uid}-${Date.now()}`
 
   const numTicks = colors?.length
 
-  const longestLabel = labels && labels.length > 0 ? labels.reduce((a, b) => (a.length > b.length ? a : b)) : ''
+  const longestLabel = (labels || []).reduce((a: string, b) => (a.length > String(b).length ? a : b), '')
   const boxHeight = 20
   let height = 50
-  const margin = 1
 
   // configure tick witch and angle
   const textWidth = getTextWidth(longestLabel, `normal 14px sans-serif`)
-  const rotationAngle = Number(config.legend.tickRotation) || 0
+  const rotationAngle = Number(tickRotation) || 0
   // Convert the angle from degrees to radians
   const angleInRadians = rotationAngle * (Math.PI / 180)
   const newHeight = height + Number(textWidth) * Math.sin(angleInRadians)
 
-  // configre gradient colors
+  // configure gradient colors
   const stops = colors.map((color, index) => {
     const offset = (index / (colors.length - 1)) * 100
     return <stop key={index} offset={`${offset}%`} style={{ stopColor: color, stopOpacity: 1 }} />
@@ -45,69 +58,71 @@ const LegendGradient = ({ labels, colors, config, dimensions, currentViewport }:
   // render ticks and labels
   const ticks = labels.map((key, index) => {
     const segmentWidth = legendWidth / numTicks
-    const xPositionX = index * segmentWidth + segmentWidth
+    const xPositionX = index * segmentWidth + segmentWidth + MARGIN
     const textAnchor = rotationAngle ? 'end' : 'middle'
     const verticalAnchor = rotationAngle ? 'middle' : 'start'
+    const lastTick = index === labels.length - 1
 
     return (
-      <Group top={margin}>
-        <line x1={xPositionX} x2={xPositionX} y1={30} y2={boxHeight} stroke='black' />
+      <Group top={MARGIN}>
+        {!lastTick && !isLinearBlocks && <line x1={xPositionX} x2={xPositionX} y1={30} y2={boxHeight} stroke='black' />}
         <Text
-          angle={-config.legend.tickRotation}
+          angle={-tickRotation}
           x={xPositionX}
           y={boxHeight}
           dy={10}
           dx={-segmentWidth / 2}
-          fontSize='14'
+          fontSize={smallScreen ? '12' : '14'}
           textAnchor={textAnchor}
           verticalAnchor={verticalAnchor}
+          width={segmentWidth}
+          lineHeight={'14'}
         >
           {key}
         </Text>
       </Group>
     )
   })
-  if ((config.type === 'map' && config.legend.position === 'side') || !config.legend.position) {
+  if ((type === 'map' && position === 'side') || !position) {
     return
   }
-  if (
-    config.type === 'chart' &&
-    (config.legend.position === 'left' || config.legend.position === 'right' || !config.legend.position)
-  ) {
+  if (type === 'chart' && (position === 'left' || position === 'right' || !position)) {
     return
   }
 
-  if (config.legend.style === 'gradient') {
+  if (style === 'gradient') {
     return (
-      <svg style={{ overflow: 'visible', width: '100%', marginTop: 10 }} height={newHeight}>
+      <svg
+        style={{ overflow: 'visible', width: '100%', marginTop: 10, marginBottom: hideBorder ? 10 : 0 }}
+        height={newHeight}
+      >
         {/* background border*/}
-        <rect
-          x={0}
-          y={0}
-          width={legendWidth + margin * 2}
-          height={boxHeight + margin * 2}
-          fill='#d3d3d3'
-          strokeWidth='0.5'
-        />
+        <rect x={0} y={0} width={legendWidth + MARGIN * 2} height={boxHeight + MARGIN * 2} fill='#d3d3d3' />
         {/* Define the gradient */}
         <linearGradient id={`gradient-smooth-${uniqueID}`} x1='0%' y1='0%' x2='100%' y2='0%'>
           {stops}
         </linearGradient>
 
-        {config.legend.subStyle === 'smooth' && (
-          <rect x={1} y={1} width={legendWidth} height={boxHeight} fill={`url(#gradient-smooth-${uniqueID})`} />
+        {subStyle === 'smooth' && (
+          <rect
+            x={MARGIN}
+            y={MARGIN}
+            width={legendWidth}
+            height={boxHeight}
+            fill={`url(#gradient-smooth-${uniqueID})`}
+          />
         )}
 
-        {config.legend.subStyle === 'linear blocks' &&
+        {subStyle === 'linear blocks' &&
           colors.map((color, index) => {
             const segmentWidth = legendWidth / numTicks
-            const xPosition = index * segmentWidth
+            const xPosition = index * segmentWidth + MARGIN
             return (
               <Group>
                 <rect
                   key={index}
                   x={xPosition}
-                  y={0}
+                  y={MARGIN}
                   width={segmentWidth}
                   height={boxHeight}
                   fill={color}

package/components/Loader/Loader.tsx

@@ -1,17 +1,22 @@
 import React, { useEffect, useRef } from 'react'
 import './loader.styles.css'
 
+// these coorespond to bootstrap classes
+// https://getbootstrap.com/docs/4.2/components/spinners/
+type SpinnerType = 'text-primary' | 'text-secondary'
+
 type LoaderProps = {
   fullScreen?: boolean
+  spinnerType?: SpinnerType
 }
 
-const Spinner = () => (
-  <div className='spinner-border text-primary' role='status'>
+const Spinner = ({ spinnerType }: { spinnerType: SpinnerType }) => (
+  <div className={`spinner-border ${spinnerType}`} role='status'>
     <span className='sr-only'>Loading...</span>
   </div>
 )
 
-const Loader: React.FC<LoaderProps> = ({ fullScreen = false }) => {
+const Loader: React.FC<LoaderProps> = ({ fullScreen = false, spinnerType }) => {
   const backgroundRef = useRef(null)
 
   useEffect(() => {
@@ -23,10 +28,10 @@ const Loader: React.FC<LoaderProps> = ({ fullScreen = false }) => {
 
   return fullScreen ? (
     <div ref={backgroundRef} className='cove-loader fullscreen'>
-      <Spinner />
+      <Spinner spinnerType={spinnerType || 'text-primary'} />
     </div>
   ) : (
-    <Spinner />
+    <Spinner spinnerType={spinnerType || 'text-primary'} />
   )
 }
 

package/components/MultiSelect/MultiSelect.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import Tooltip from '../ui/Tooltip'
 import Icon from '../ui/Icon'
 
 import './multiselect.styles.css'
 import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
+import Loader from '../Loader'
 
 interface Option {
   value: string | number
@@ -20,11 +21,24 @@ interface MultiSelectProps {
   selected?: (string | number)[]
   limit?: number
   tooltip?: React.ReactNode
+  loading?: boolean
 }
 
-const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField, selected = [], limit, tooltip }) => {
-  const preselectedItems = options.filter(opt => selected.includes(opt.value)).slice(0, limit)
-  const [selectedItems, setSelectedItems] = useState<Option[]>(preselectedItems)
+const MultiSelect: React.FC<MultiSelectProps> = ({
+  section = null,
+  subsection = null,
+  fieldName,
+  label,
+  options,
+  updateField,
+  selected = [],
+  limit,
+  tooltip,
+  loading
+}) => {
+  const preselectedItems = useMemo(() => options.filter(opt => selected.includes(opt.value)).slice(0, limit), [options])
+  const [selectedItems, setSelectedItems] = useState<Option[]>()
+  const items = selectedItems || preselectedItems
   const [expanded, setExpanded] = useState(false)
   const multiSelectRef = useRef(null)
 
@@ -52,15 +66,15 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
 
   const handleItemSelect = (option: Option, e = null) => {
     if (e && e.type === 'keyup' && e.key !== 'Enter') return
-    if (limit && selectedItems.length >= limit) return
-    const newItems = [...selectedItems, option]
+    if (limit && items?.length >= limit) return
+    const newItems = [...items, option]
     setSelectedItems(newItems)
     update(newItems)
   }
 
   const handleItemRemove = (option: Option, e = null) => {
     if (e && e.type === 'keyup' && e.key !== 'Enter') return
-    const newItems = selectedItems.filter(item => item.value !== option.value)
+    const newItems = items.filter(item => item.value !== option.value)
     setSelectedItems(newItems)
     update(newItems)
   }
@@ -68,33 +82,40 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
   const multiID = 'multiSelect_' + label
   return (
     <div ref={multiSelectRef} className='cove-multiselect'>
-      {label && (
-        <span id={multiID} className='edit-label column-heading'>
-          {label}
-        </span>
-      )}
-
       {tooltip && tooltip}
 
       <div className='wrapper'>
-        <div className='selected'>
-          {selectedItems.map(item => (
-            <div key={item.value} aria-labelledby={label ? multiID : undefined}>
-              {item.label}
-              <button
-                aria-label='Remove'
-                onClick={e => {
-                  e.preventDefault()
-                  handleItemRemove(item)
-                }}
-                onKeyUp={e => {
-                  handleItemRemove(item, e)
-                }}
-              >
-                x
-              </button>
-            </div>
-          ))}
+        <div
+          id={multiID}
+          onClick={() => {
+            if (!items.length && !loading) {
+              setExpanded(true)
+            }
+          }}
+          className='selected'
+          aria-disabled={loading}
+        >
+          {items.length ? (
+            items.map(item => (
+              <div key={item.value} aria-labelledby={label ? multiID + label : undefined}>
+                {item.label}
+                <button
+                  aria-label='Remove'
+                  onClick={e => {
+                    e.preventDefault()
+                    handleItemRemove(item)
+                  }}
+                  onKeyUp={e => {
+                    handleItemRemove(item, e)
+                  }}
+                >
+                  x
+                </button>
+              </div>
+            ))
+          ) : (
+            <span className='pl-1 pt-1'>{loading ? 'Loading...' : '- Select -'}</span>
+          )}
           <button
             aria-label={expanded ? 'Collapse' : 'Expand'}
             aria-labelledby={label ? multiID : undefined}
@@ -104,9 +125,10 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
               setExpanded(!expanded)
             }}
           >
-            <Icon display={expanded ? 'caretDown' : 'caretUp'} style={{ cursor: 'pointer' }} />
+            <Icon display={'caretDown'} style={{ cursor: 'pointer' }} />
           </button>
         </div>
+        {loading && <Loader spinnerType={'text-secondary'} />}
         {!!limit && (
           <Tooltip style={{ textTransform: 'none' }}>
             <Tooltip.Target>
@@ -118,9 +140,10 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
           </Tooltip>
         )}
       </div>
+
       <ul className={'dropdown' + (expanded ? '' : ' d-none')}>
         {options
-          .filter(option => !selectedItems.find(item => item.value === option.value))
+          .filter(option => !items.find(item => item.value === option.value))
           .map(option => (
             <li
               className='cove-multiselect-li'

package/components/MultiSelect/multiselect.styles.css

@@ -1,5 +1,4 @@
 .cove-multiselect {
-  position: relative;
   .cove-input__label {
     display: block;
   }
@@ -7,9 +6,11 @@
     display: inline-flex;
     align-items: center;
     .selected {
+      &[aria-disabled='true'] {
+        background: var(--lightestGray);
+      }
       border: 1px solid var(--lightGray);
-      padding: 5px;
-      min-height: 40px;
+      padding: 7px;
       min-width: 200px;
       display: inline-block;
       :is(button) {
@@ -25,10 +26,14 @@
         border-radius: 5px;
       }
       .expand {
-        padding: 0 5px;
-        border-radius: 5px;
-        background: var(--lightGray);
+        padding: 2px 0px;
+        margin-right: -6px;
         float: right;
+        margin-bottom: -3px;
+        color: var(--mediumGray);
+        &:focus {
+          outline: none;
+        }
       }
       border-radius: 5px;
     }
@@ -39,11 +44,15 @@
         margin-bottom: 0;
       }
     }
+    .spinner-border {
+      right: 20% !important;
+    }
   }
   .dropdown {
     background: white;
     position: absolute;
-    margin-top: 5px;
+    top: var(--select-height);
+    margin-top: 0px;
     border: 1px solid var(--lightGray);
     padding-left: 0;
     min-height: 40px;
@@ -62,3 +71,7 @@
     }
   }
 }
+
+.accordion__panel .cove-multiselect .dropdown {
+  position: relative;
+}

package/components/NestedDropdown/NestedDropdown.tsx

@@ -1,15 +1,17 @@
-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'
+import Loader from '../Loader'
 
 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 +20,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 +28,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 +46,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 +75,7 @@ const Options: React.FC<{
             return (
               <li
                 key={regionID}
-                className='selectable-item'
+                className={`selectable-item-${filterIndex}`}
                 tabIndex={0}
                 role='treeitem'
                 aria-label={regionID}
@@ -104,28 +106,31 @@ const Options: React.FC<{
 type NestedDropdownProps = {
   activeGroup: string
   activeSubGroup?: string
-  isEditor?: boolean
-  isUrlFilter?: boolean
+  filterIndex: number
   listLabel: string
   handleSelectedItems: ([group, subgroup]: [string, string]) => void
   options: NestedOptions
-  subGroupingActive?: string
+  loading?: boolean
 }
 
 const NestedDropdown: React.FC<NestedDropdownProps> = ({
   options,
   activeGroup,
   activeSubGroup,
+  filterIndex,
   listLabel,
-  handleSelectedItems
+  handleSelectedItems,
+  loading
 }) => {
-  const groupFilterActive = activeGroup
-  const subGroupFilterActive = activeSubGroup || ''
+  const dropdownId = useId()
 
   const [userSearchTerm, setUserSearchTerm] = useState('')
-  const [inputValue, setInputValue] = useState(
-    subGroupFilterActive !== '' ? `${groupFilterActive} - ${subGroupFilterActive}` : ''
-  )
+  const [inputValue, setInputValue] = useState('')
+
+  const initialInputValue = useMemo(() => {
+    // value from props
+    return activeSubGroup ? `${activeGroup} - ${activeSubGroup}` : ''
+  }, [activeSubGroup])
   const [inputHasFocus, setInputHasFocus] = useState(false)
   const [isListOpened, setIsListOpened] = useState(false)
 
@@ -150,7 +155,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 +180,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 +219,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
     }
   }
 
-  const filterOptions: OptionsMemo = useMemo(() => {
+  const filterOptions = useMemo(() => {
     return filterSearchTerm(userSearchTerm, options)
   }, [userSearchTerm, options])
 
@@ -225,39 +230,56 @@ 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>}
       <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'>
+        <div
+          className={`nested-dropdown-input-container${loading || !options.length ? ' disabled' : ''}`}
+          aria-label='searchInput'
+          aria-disabled={loading}
+          role='textbox'
+        >
           <input
+            id={`nested-dropdown-${filterIndex}`}
             className='search-input'
             ref={searchInput}
             aria-label='searchInput'
             aria-haspopup='true'
             aria-hidden='false'
             tabIndex={0}
-            value={inputValue}
+            value={inputValue || initialInputValue}
             onChange={handleSearchTermChange}
-            placeholder={'Select an Option'}
+            placeholder={loading ? 'Loading...' : '- Select -'}
+            disabled={loading || !options.length}
             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>
+        {loading && <Loader spinnerType={'text-secondary'} />}
         <ul
           role='tree'
           key={listLabel}
@@ -275,11 +297,12 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
                   <Options
                     key={groupTextValue + '_' + index}
                     subOptions={subgroup}
+                    filterIndex={filterIndex}
                     label={groupTextValue}
                     handleSubGroupSelect={subGroupValue => {
                       chooseSelectedSubGroup(groupValue, subGroupValue)
                     }}
-                    userSelectedLabel={groupFilterActive + subGroupFilterActive}
+                    userSelectedLabel={activeGroup + activeSubGroup}
                     userSearchTerm={userSearchTerm}
                   />
                 )