@cdc/core 4.24.4 → 4.24.7

package/components/EditorPanel/VizFilterEditor/components/FilterOrder.tsx

@@ -0,0 +1,54 @@
+import { VizFilter } from '../../../../types/VizFilter'
+import { filterOrderOptions } from '../../../Filters'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
+
+type FilterOrderProps = {
+  filterIndex: number
+  filter: VizFilter
+  updateFilterProp: (prop: string, index: number, value: string) => void
+  handleFilterOrder: (sourceIndex: number, destinationIndex: number, filterIndex: number, filter: VizFilter) => void
+}
+
+const FilterOrder: React.FC<FilterOrderProps> = ({ filterIndex, filter, updateFilterProp, handleFilterOrder }) => {
+  return (
+    <label>
+      <span className='edit-filterOrder column-heading'>Filter Order</span>
+      <select value={filter.order ? filter.order : 'asc'} onChange={e => updateFilterProp('order', filterIndex, e.target.value)}>
+        {filterOrderOptions.map((option, index) => {
+          return (
+            <option value={option.value} key={`filter-${index}`}>
+              {option.label}
+            </option>
+          )
+        })}
+      </select>
+
+      {filter.order === 'cust' && (
+        <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source.index, destination.index, filterIndex, filter)}>
+          <Droppable droppableId='filter_order'>
+            {provided => (
+              <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
+                {filter?.values.map((value, index) => {
+                  return (
+                    <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
+                      {(provided, snapshot) => (
+                        <li>
+                          <div className={snapshot.isDragging ? 'currently-dragging' : ''} style={provided.draggableProps.style} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                            {value}
+                          </div>
+                        </li>
+                      )}
+                    </Draggable>
+                  )
+                })}
+                {provided.placeholder}
+              </ul>
+            )}
+          </Droppable>
+        </DragDropContext>
+      )}
+    </label>
+  )
+}
+
+export default FilterOrder

package/components/EditorPanel/VizFilterEditor/index.ts

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

package/components/EditorWrapper/EditorWrapper.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Visualization } from '../../types/Visualization'
+import { ViewPort } from '../../types/ViewPort'
+import './editor-wrapper.style.css'
+
+type StandAloneComponentProps = {
+  visualizationKey: string
+  config
+  updateConfig: (Visualization) => void
+  configUrl: string
+  setEditing: Function
+  hostname: string
+  viewport?: ViewPort
+
+  [key: string]: any
+}
+
+type EditorProps = {
+  component: React.JSXElementConstructor<StandAloneComponentProps>
+  type: string
+  visualizationKey: string
+  visualizationConfig: Visualization
+  updateConfig: (Visualization) => void
+  viewport?: ViewPort
+}
+
+const EditorWrapper: React.FC<React.PropsWithChildren<EditorProps>> = ({ children, visualizationKey, visualizationConfig, type, component: Component, updateConfig, viewport }) => {
+  const [displayPanel, setDisplayPanel] = React.useState(true)
+  return (
+    <>
+      <div className='editor-wrapper'>
+        <button className={`editor-toggle ${displayPanel ? '' : 'collapsed'}`} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={() => setDisplayPanel(!displayPanel)} />
+        <section className={`${displayPanel ? '' : 'hidden'} editor-panel cove`}>
+          <div aria-level={2} role='heading' className='heading-2'>
+            Configure {type}
+          </div>
+          <section>{children}</section>
+        </section>
+        <div className='preview-wrapper'>
+          <Component visualizationKey={visualizationKey} config={visualizationConfig} updateConfig={updateConfig} configUrl={undefined} setEditing={undefined} hostname={undefined} viewport={viewport} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default EditorWrapper

package/components/EditorWrapper/editor-wrapper.style.css

@@ -0,0 +1,14 @@
+.editor-wrapper {
+  --editorPanelWidth: 350px;
+  position: relative;
+  min-height: 80vh;
+  .editor-panel {
+    :is(form) {
+      border-right: var(--lightGray) 1px solid;
+      flex-grow: 1;
+    }
+  }
+  .preview-wrapper {
+    padding-left: var(--editorPanelWidth);
+  }
+}

package/components/EditorWrapper/index.ts

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

package/components/{Filters.jsx → Filters.tsx}

@@ -1,37 +1,69 @@
-import React, { useState, useEffect, useRef } from 'react'
+import { useState, useEffect } from 'react'
 import { useId } from 'react'
 
 // CDC
-import Button from '@cdc/core/components/elements/Button'
-import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
+import Button from './elements/Button'
+import { getQueryParams, updateQueryString } from '../helpers/queryStringUtils'
 
 // Third Party
 import PropTypes from 'prop-types'
+import MultiSelect from './MultiSelect'
+import { Visualization } from '../types/Visualization'
+import { MultiSelectFilter, VizFilter } from '../types/VizFilter'
+import { filterVizData } from '../helpers/filterVizData'
+import { addValuesToFilters } from '../helpers/addValuesToFilters'
+
+export const filterStyleOptions = ['dropdown', 'pill', 'tab', 'tab bar', 'multi-select']
+
+export const filterOrderOptions = [
+  {
+    label: 'Ascending Alphanumeric',
+    value: 'asc'
+  },
+  {
+    label: 'Descending Alphanumeric',
+    value: 'desc'
+  },
+  {
+    label: 'Custom',
+    value: 'cust'
+  }
+]
+
+export const handleSorting = singleFilter => {
+  const { order } = singleFilter
+
+  const sortAsc = (a, b) => {
+    return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
+  }
+
+  const sortDesc = (a, b) => {
+    return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
+  }
+
+  if (!order || order === '') {
+    singleFilter.order = 'asc'
+  }
+
+  if (order === 'desc') {
+    singleFilter.values = singleFilter.values.sort(sortDesc)
+  }
+
+  if (order === 'asc') {
+    singleFilter.values = singleFilter.values.sort(sortAsc)
+  }
+  return singleFilter
+}
+
+const hasStandardFilterBehavior = ['chart', 'table']
 
 export const useFilters = props => {
   const [showApplyButton, setShowApplyButton] = useState(false)
 
   // Desconstructing: notice, adding more descriptive visualizationConfig name over config
   // visualizationConfig feels more robust for all vis types so that its not confused with config/state/etc.
-  const { config: visualizationConfig, setConfig, filteredData, setFilteredData, excludedData, filterData } = props
-  const { type, filterBehavior, filters } = visualizationConfig
-
-  const filterStyleOptions = ['dropdown', 'pill', 'tab', 'tab bar']
-
-  const filterOrderOptions = [
-    {
-      label: 'Ascending Alphanumeric',
-      value: 'asc'
-    },
-    {
-      label: 'Descending Alphanumeric',
-      value: 'desc'
-    },
-    {
-      label: 'Custom',
-      value: 'cust'
-    }
-  ]
+  const { config: visualizationConfig, setConfig, filteredData, setFilteredData, excludedData, getUniqueValues } = props
+  const { type, data } = visualizationConfig
 
   /**
    * Re-orders a filter based on two indices and updates the runtime filters array and filters state
@@ -51,7 +83,7 @@ export const useFilters = props => {
     const [movedItem] = updatedValues.splice(idx1, 1)
     updatedValues.splice(idx2, 0, movedItem)
 
-    const filtersCopy = visualizationConfig.type === 'chart' ? [...visualizationConfig.filters] : [...filteredData]
+    const filtersCopy = hasStandardFilterBehavior.includes(visualizationConfig.type) ? [...visualizationConfig.filters] : [...filteredData]
     const filterItem = { ...filtersCopy[filterIndex] }
 
     // Overwrite filterItem.values since thats what we map through in the editor panel
@@ -99,8 +131,8 @@ export const useFilters = props => {
     }
 
     // If we're on a chart and not using the apply button
-    if (visualizationConfig.type === 'chart' && visualizationConfig.filterBehavior === 'Filter Change') {
-      setFilteredData(filterData(newFilters, excludedData))
+    if (hasStandardFilterBehavior.includes(visualizationConfig.type) && visualizationConfig.filterBehavior === 'Filter Change') {
+      setFilteredData(filterVizData(newFilters, excludedData))
     }
   }
 
@@ -127,8 +159,8 @@ export const useFilters = props => {
       setFilteredData(newFilters, excludedData)
     }
 
-    if (type === 'chart') {
-      setFilteredData(filterData(newFilters, excludedData))
+    if (hasStandardFilterBehavior.includes(visualizationConfig.type)) {
+      setFilteredData(filterVizData(newFilters, excludedData))
     }
 
     setShowApplyButton(false)
@@ -139,19 +171,31 @@ export const useFilters = props => {
     e.preventDefault()
 
     // reset to first item in values array.
-    newFilters.map(filter => {
-      filter = handleSorting(filter)
-      filter.active = filter.values[0]
-      return filter
+    let needsQueryUpdate = false
+    const queryParams = getQueryParams()
+    newFilters.forEach((filter, i) => {
+      if (!filter.values || filter.values.length === 0) {
+        filter.values = getUniqueValues(data, filter.columnName)
+      }
+      newFilters[i].active = handleSorting(filter).values[0]
+
+      if (filter.setByQueryParameter && queryParams[filter.setByQueryParameter] !== filter.active) {
+        queryParams[filter.setByQueryParameter] = filter.active
+        needsQueryUpdate = true
+      }
     })
 
+    if (needsQueryUpdate) {
+      updateQueryString(queryParams)
+    }
+
+    setConfig({ ...visualizationConfig, filters: newFilters })
+
     if (type === 'map') {
       setFilteredData(newFilters, excludedData)
     } else {
-      setFilteredData(filterData(newFilters, excludedData))
+      setFilteredData(filterVizData(newFilters, excludedData))
     }
-
-    setConfig({ ...visualizationConfig, filters: newFilters })
   }
 
   const filterConstants = {
@@ -161,31 +205,6 @@ export const useFilters = props => {
     applyText: 'Select the apply button to update the visualization information.'
   }
 
-  const handleSorting = singleFilter => {
-    const { order } = singleFilter
-
-    const sortAsc = (a, b) => {
-      return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
-    }
-
-    const sortDesc = (a, b) => {
-      return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
-    }
-
-    if (!order || order === '') {
-      singleFilter.order = 'asc'
-    }
-
-    if (order === 'desc') {
-      singleFilter.values = singleFilter.values.sort(sortDesc)
-    }
-
-    if (order === 'asc') {
-      singleFilter.values = singleFilter.values.sort(sortAsc)
-    }
-    return singleFilter
-  }
-
   // prettier-ignore
   return {
     handleApplyButton,
@@ -201,11 +220,17 @@ export const useFilters = props => {
   }
 }
 
-const Filters = props => {
+type FilterProps = {
+  filteredData
+  dimensions
+  config: Visualization
+}
+
+const Filters = (props: FilterProps) => {
   const { config: visualizationConfig, filteredData, dimensions } = props
   const { filters, type, general, theme, filterBehavior } = visualizationConfig
   const [mobileFilterStyle, setMobileFilterStyle] = useState(false)
-  const [selectedFilter, setSelectedFilter] = useState('')
+  const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
   const id = useId()
 
   // useFilters hook provides data and logic for handling various filter functions
@@ -231,7 +256,7 @@ const Filters = props => {
 
   useEffect(() => {
     if (selectedFilter) {
-      let el = document.getElementById(selectedFilter.id)
+      const el = document.getElementById(selectedFilter.id)
       if (el) el.focus()
     }
   }, [changeFilterActive, selectedFilter])
@@ -240,21 +265,21 @@ const Filters = props => {
 
   const filterSectionClassList = ['filters-section', type === 'map' ? general.headerColor : visualizationConfig?.visualizationType === 'Spark Line' ? null : theme]
   // Exterior Section Wrapper
-  Filters.Section = props => {
+  Filters.Section = ({ children }) => {
     return (
       visualizationConfig?.filters && (
         <section className={filterSectionClassList.join(' ')}>
           <p className='filters-section__intro-text'>
             {filters?.some(f => f.active) ? filterConstants.introText : ''} {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
           </p>
-          <div className='filters-section__wrapper'>{props.children}</div>
+          <div className='filters-section__wrapper'>{children}</div>
         </section>
       )
     )
   }
 
   // Apply/Reset Buttons
-  Filters.ApplyBehavior = props => {
+  Filters.ApplyBehavior = () => {
     if (filterBehavior !== 'Apply Button') return
     const applyButtonClasses = [general?.headerColor ? general.headerColor : theme, 'apply']
     return (
@@ -332,7 +357,7 @@ const Filters = props => {
       // Remove fromHash if it exists on filters to loop so we can loop nicely
       delete filtersToLoop.fromHash
 
-      return filtersToLoop.map((singleFilter, outerIndex) => {
+      return addValuesToFilters<VizFilter>(filtersToLoop, visualizationConfig.data).map((singleFilter: VizFilter, outerIndex) => {
         if (singleFilter.showDropdown === false) return
 
         const values = []
@@ -340,11 +365,11 @@ const Filters = props => {
         const tabValues = []
         const tabBarValues = []
 
-        const { active, queuedActive, label, filterStyle } = singleFilter
+        const { active, queuedActive, label, filterStyle } = singleFilter as VizFilter
 
         handleSorting(singleFilter)
 
-        singleFilter.values.forEach((filterOption, index) => {
+        singleFilter.values?.forEach((filterOption, index) => {
           const pillClassList = ['pill', active === filterOption ? 'pill--active' : null, theme && theme]
           const tabClassList = ['tab', active === filterOption && 'tab--active', theme && theme]
 
@@ -408,6 +433,15 @@ const Filters = props => {
               {filterStyle === 'pill' && !mobileFilterStyle && <Filters.Pills pills={pillValues} />}
               {filterStyle === 'tab bar' && !mobileFilterStyle && <Filters.TabBar filter={singleFilter} index={outerIndex} />}
               {(filterStyle === 'dropdown' || mobileFilterStyle) && <Filters.Dropdown filter={singleFilter} index={outerIndex} label={label} active={queuedActive || active} filters={values} />}
+              {filterStyle === 'multi-select' && (
+                <MultiSelect
+                  options={singleFilter.values.map(v => ({ value: v, label: v }))}
+                  fieldName={outerIndex}
+                  updateField={(_section, _subSection, fieldName, value) => changeFilterActive(fieldName, value)}
+                  selected={singleFilter.active as string[]}
+                  limit={(singleFilter as MultiSelectFilter).selectLimit || 5}
+                />
+              )}
             </>
           </div>
         )
@@ -437,8 +471,6 @@ Filters.propTypes = {
   setConfig: PropTypes.func,
   // exclusions
   excludedData: PropTypes.array,
-  // function for filtering the data
-  filterData: PropTypes.func,
   dimensions: PropTypes.array
 }
 

package/components/Footnotes/Footnotes.tsx

@@ -0,0 +1,25 @@
+import { Footnote } from '../../types/Footnotes'
+import './footnotes.css'
+
+type FootnotesProps = {
+  footnotes: Footnote[]
+}
+
+const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
+  return (
+    <footer className='col-12 m-3 mt-1 mb-0'>
+      <ul className='cove-footnotes'>
+        {footnotes.map((note, i) => {
+          return (
+            <li key={note.symbol + i} className='mb-1'>
+              {note.symbol && <span className='mr-1'>{note.symbol}</span>}
+              {note.text}
+            </li>
+          )
+        })}
+      </ul>
+    </footer>
+  )
+}
+
+export default Footnotes

package/components/Footnotes/FootnotesStandAlone.tsx

@@ -0,0 +1,45 @@
+import EditorWrapper from '../EditorWrapper'
+import Footnotes from './Footnotes'
+import FootnotesEditor from '../EditorPanel/FootnotesEditor'
+import { ViewPort } from '../../types/ViewPort'
+import FootnotesConfig, { Footnote } from '../../types/Footnotes'
+import _ from 'lodash'
+import { useMemo } from 'react'
+import { updateFieldFactory } from '../../helpers/updateFieldFactory'
+
+type StandAloneProps = {
+  isEditor?: boolean
+  visualizationKey: string
+  config: FootnotesConfig
+  updateConfig?: (config: FootnotesConfig) => void
+  viewport?: ViewPort
+}
+
+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}>
+        <FootnotesEditor key={visualizationKey} config={config} updateField={updateField} />
+      </EditorWrapper>
+    )
+
+  // get the api footnotes from the config
+  const apiFootnotes = useMemo(() => {
+    if (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] }))
+    }
+    return []
+  }, [config.dynamicFootnotes, config.formattedData, config.data])
+
+  // get static footnotes from the config.footnotes
+  const staticFootnotes = config.staticFootnotes || []
+
+  return <Footnotes footnotes={[...apiFootnotes, ...staticFootnotes]} />
+}
+
+export default FootnotesStandAlone

package/components/Footnotes/footnotes.css

@@ -0,0 +1,5 @@
+:is(ul).cove-footnotes {
+  :is(li) {
+    list-style: none;
+  }
+}

package/components/Footnotes/index.ts

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

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

@@ -601,7 +601,7 @@
       /* clicking anywhere will focus the input */
       cursor: text;
 
-      span {
+      span:not(.cove-tooltip, .cove-icon) {
         display: inline;
       }
     }
@@ -723,6 +723,10 @@
       margin-right: 5px;
     }
 
+    .cove-tooltip {
+      position: relative;
+    }
+
     // tooltips
     .cove-label + .cove-tooltip {
       top: 1px;
@@ -731,9 +735,9 @@
     }
 
     .cove-accordion__button .cove-tooltip {
-      display: inline-flex;
-      right: 1.5rem;
-      line-height: inherit;
+      // display: inline-flex;
+      // right: 1.5rem;
+      // line-height: inherit;
     }
 
     .cove-list-group__item .cove-tooltip {

package/components/Layout/components/Visualization/index.tsx

@@ -1,16 +1,19 @@
 // main visualization wrapper
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef } from 'react'
 import { Config as DataBiteConfig } from '@cdc/data-bite/src/types/Config'
 import './visualizations.scss'
 import { Config as WaffleChartConfig } from '@cdc/waffle-chart/src/types/Config'
+import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
+import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
 
 type VisualizationWrapper = {
-  config: ChartConfig | DataBiteConfig | WaffleChartConfig
-  isEditor: boolean
-  currentViewport: string
-  imageId: string
   children: React.ReactNode
+  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig | DashboardFilters
+  currentViewport?: string
+  imageId?: string
+  isEditor: boolean
+  showEditorPanel?: boolean
 }
 
 const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) => {
@@ -31,6 +34,12 @@ const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) =>
       classes.push('editor-panel--hidden')
     }
 
+    if (config.type === 'filtered-text') {
+      classes.push('type-filtered-text')
+      classes = classes.filter(item => item !== 'cove-component__content')
+      return classes
+    }
+
     if (config.type === 'chart') {
       classes.push('type-chart')
       config?.visualizationType === 'Spark Line' && classes.push(`type-sparkline`)

package/components/MediaControls.jsx

@@ -59,7 +59,7 @@ const generateMedia = (state, type, elementToCapture) => {
 
   switch (type) {
     case 'image':
-      html2canvas(baseSvg).then(canvas => {
+      html2canvas(baseSvg, {ignoreElements: el => el.className?.indexOf && el.className.search(/download-buttons|download-links|data-table-container/) !== -1}).then(canvas => {
         saveImageAs(canvas.toDataURL(), filename + '.png')
       })
       return

package/components/MultiSelect/MultiSelect.tsx

@@ -21,8 +21,8 @@ interface MultiSelectProps {
   limit?: number
 }
 
-const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField, selected, limit }) => {
-  const preselectedItems = options.filter(opt => selected?.includes(opt.value)).slice(0, limit)
+const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField, selected = [], limit }) => {
+  const preselectedItems = options.filter(opt => selected.includes(opt.value)).slice(0, limit)
   const [selectedItems, setSelectedItems] = useState<Option[]>(preselectedItems)
   const [expanded, setExpanded] = useState(false)
   const multiSelectRef = useRef(null)
@@ -68,22 +68,39 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
   return (
     <div ref={multiSelectRef} className='cove-multiselect'>
       {label && (
-        <label id={multiID} className='cove-input__label'>
+        <span id={multiID} className='edit-label column-heading'>
           {label}
-        </label>
+        </span>
       )}
 
       <div className='wrapper'>
         <div className='selected'>
           {selectedItems.map(item => (
-            <div key={item.value} aria-labelledby={label ? multiID : undefined} role='button' onClick={() => handleItemRemove(item)} onKeyUp={e => handleItemRemove(item, e)}>
+            <div key={item.value} aria-labelledby={label ? multiID : undefined}>
               {item.label}
-              <button aria-label='Remove' onClick={() => handleItemRemove(item)}>
+              <button
+                aria-label='Remove'
+                onClick={e => {
+                  e.preventDefault()
+                  handleItemRemove(item)
+                }}
+                onKeyUp={e => {
+                  handleItemRemove(item, e)
+                }}
+              >
                 x
               </button>
             </div>
           ))}
-          <button aria-label={expanded ? 'Collapse' : 'Expand'} aria-labelledby={label ? multiID : undefined} className='expand' onClick={() => setExpanded(!expanded)}>
+          <button
+            aria-label={expanded ? 'Collapse' : 'Expand'}
+            aria-labelledby={label ? multiID : undefined}
+            className='expand'
+            onClick={e => {
+              e.preventDefault()
+              setExpanded(!expanded)
+            }}
+          >
             <Icon display={expanded ? 'caretDown' : 'caretUp'} style={{ cursor: 'pointer' }} />
           </button>
         </div>
@@ -98,11 +115,21 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
           </Tooltip>
         )}
       </div>
-      <ul className={'dropdown' + (expanded ? '' : ' hide')}>
+      <ul className={'dropdown' + (expanded ? '' : ' d-none')}>
         {options
           .filter(option => !selectedItems.find(item => item.value === option.value))
           .map(option => (
-            <li className='cove-multiselect-li' key={option.value} role='option' tabIndex={0} onClick={() => handleItemSelect(option)} onKeyUp={e => handleItemSelect(option, e)}>
+            <li
+              className='cove-multiselect-li'
+              key={option.value}
+              role='option'
+              tabIndex={0}
+              onClick={e => {
+                e.preventDefault()
+                handleItemSelect(option, e)
+              }}
+              onKeyUp={e => handleItemSelect(option, e)}
+            >
               {option.label}
             </li>
           ))}

package/components/MultiSelect/multiselect.styles.css

@@ -51,9 +51,6 @@
     overflow-y: scroll;
     min-width: 200px;
     z-index: 4;
-    &.hide {
-      display: none;
-    }
 
     :is(li) {
       cursor: pointer;