@cdc/core 4.24.2 → 4.24.4

package/components/MultiSelect/MultiSelect.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
+import Tooltip from '../ui/Tooltip'
 import Icon from '../ui/Icon'
 
 import './multiselect.styles.css'
@@ -12,14 +13,17 @@ interface Option {
 interface MultiSelectProps {
   section?: string
   subsection?: string
-  fieldName: string
+  fieldName: string | number
   options: Option[]
   updateField: UpdateFieldFunc<string[]>
   label?: string
+  selected?: string[]
+  limit?: number
 }
 
-const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField }) => {
-  const [selectedItems, setSelectedItems] = useState<Option[]>([])
+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)
 
@@ -45,13 +49,16 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
       newItems.map(item => item.value)
     )
 
-  const handleItemSelect = (option: Option) => {
+  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]
     setSelectedItems(newItems)
     update(newItems)
   }
 
-  const handleItemRemove = (option: Option) => {
+  const handleItemRemove = (option: Option, e = null) => {
+    if (e && e.type === 'keyup' && e.key !== 'Enter') return
     const newItems = selectedItems.filter(item => item.value !== option.value)
     setSelectedItems(newItems)
     update(newItems)
@@ -61,29 +68,41 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
   return (
     <div ref={multiSelectRef} className='cove-multiselect'>
       {label && (
-        <span id={multiID} className='edit-label cove-input__label'>
+        <label id={multiID} className='cove-input__label'>
           {label}
-        </span>
+        </label>
       )}
 
-      <div aria-labelledby={label ? multiID : undefined} className='selected'>
-        {selectedItems.map(item => (
-          <div key={item.value} role='button' tabIndex={0} onClick={() => handleItemRemove(item)} onKeyUp={() => handleItemRemove(item)}>
-            {item.label}
-            <button aria-label='Remove' onClick={() => handleItemRemove(item)}>
-              x
-            </button>
-          </div>
-        ))}
-        <button aria-label={expanded ? 'Collapse' : 'Expand'} className='expand' onClick={() => setExpanded(!expanded)}>
-          <Icon display={expanded ? 'caretDown' : 'caretUp'} style={{ cursor: 'pointer' }} />
-        </button>
+      <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)}>
+              {item.label}
+              <button aria-label='Remove' onClick={() => handleItemRemove(item)}>
+                x
+              </button>
+            </div>
+          ))}
+          <button aria-label={expanded ? 'Collapse' : 'Expand'} aria-labelledby={label ? multiID : undefined} className='expand' onClick={() => setExpanded(!expanded)}>
+            <Icon display={expanded ? 'caretDown' : 'caretUp'} style={{ cursor: 'pointer' }} />
+          </button>
+        </div>
+        {!!limit && (
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>Select up to {limit} items</p>
+            </Tooltip.Content>
+          </Tooltip>
+        )}
       </div>
       <ul className={'dropdown' + (expanded ? '' : ' hide')}>
         {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={() => handleItemSelect(option)}>
+            <li className='cove-multiselect-li' key={option.value} role='option' tabIndex={0} onClick={() => handleItemSelect(option)} onKeyUp={e => handleItemSelect(option, e)}>
               {option.label}
             </li>
           ))}

package/components/MultiSelect/multiselect.styles.css

@@ -1,39 +1,56 @@
 .cove-multiselect {
   position: relative;
-  .selected {
-    border: 1px solid #ccc;
-    padding: 5px;
-    min-height: 40px;
-    :is(button) {
-      border: none;
-      background: none;
-    }
-    :is(div) {
+  .cove-input__label {
+    display: block;
+  }
+  .wrapper {
+    display: inline-flex;
+    align-items: center;
+    .selected {
+      border: 1px solid var(--lightGray);
+      padding: 5px;
+      min-height: 40px;
+      min-width: 200px;
       display: inline-block;
-      padding: 0 0 0 5px;
-      margin-right: 5px;
-      margin-bottom: 2px;
-      background: #ccc;
+      :is(button) {
+        border: none;
+        background: none;
+      }
+      :is(div) {
+        display: inline-block;
+        padding: 0 0 0 5px;
+        margin-right: 5px;
+        margin-bottom: 2px;
+        background: var(--lightGray);
+        border-radius: 5px;
+      }
+      .expand {
+        padding: 0 5px;
+        border-radius: 5px;
+        background: var(--lightGray);
+        float: right;
+      }
       border-radius: 5px;
     }
-    .expand {
-      padding: 0 5px;
-      border-radius: 5px;
-      background: #ccc;
-      float: right;
+    .cove-tooltip__content {
+      position: absolute;
+      min-width: 120px;
+      :is(p) {
+        margin-bottom: 0;
+      }
     }
-    border-radius: 5px;
   }
   .dropdown {
     background: white;
     position: absolute;
     margin-top: 5px;
-    border: 1px solid #ccc;
-    padding: 0;
+    border: 1px solid var(--lightGray);
+    padding-left: 0;
     min-height: 40px;
-    overflow: scroll;
     max-height: 200px;
-    z-index: 1;
+    overflow-y: scroll;
+    min-width: 200px;
+    z-index: 4;
     &.hide {
       display: none;
     }
@@ -41,10 +58,10 @@
     :is(li) {
       cursor: pointer;
       list-style: none;
-      padding-left: 10px;
+      padding: 0 10px;
       &:hover {
-        background: #ccc;
-      } 
+        background: var(--lightGray);
+      }
     }
   }
-}
+}

package/components/NestedDropdown/NestedDropdown.tsx

@@ -0,0 +1,257 @@
+import { useState, useEffect, useRef, useMemo } from 'react'
+import './nesteddropdown.styles.css'
+import Icon from '@cdc/core/components/ui/Icon'
+
+const Options: React.FC<{
+  currentOptions: (string | number)[]
+  label: string
+  handleSecondTierSelect: Function
+  userSelectedTierTwoLabel: string
+  userSearchTerm: string
+}> = ({ currentOptions, label, handleSecondTierSelect, userSelectedTierTwoLabel, userSearchTerm }) => {
+  const [isTierOneExpanded, setIsTierOneExpanded] = useState(true)
+
+  const checkMark = <>&#10004;</>
+
+  useEffect(() => {
+    setIsTierOneExpanded(userSearchTerm.length > 0 ? true : isTierOneExpanded)
+  }, [userSearchTerm])
+
+  const handleGroupClick = e => {
+    const leaveExpanded = e.target.className === 'selectable-item' ? true : !isTierOneExpanded
+    setIsTierOneExpanded(leaveExpanded)
+  }
+
+  const handleKeyUp = e => {
+    const currentItem = e.target
+    if (e.key === 'ArrowRight') setIsTierOneExpanded(true)
+    else if (e.key === 'ArrowLeft') {
+      if (currentItem.className === 'selectable-item') currentItem.parentNode.parentNode.focus()
+      setIsTierOneExpanded(false)
+    } else if (e.key === 'Enter') {
+      currentItem.className === 'selectable-item' ? handleSecondTierSelect(currentItem.dataset.value) : setIsTierOneExpanded(!isTierOneExpanded)
+    }
+  }
+
+  return (
+    <>
+      <li role='treeitem' key={label} tabIndex={0} aria-label={label} onClick={handleGroupClick} onKeyUp={handleKeyUp} className='nested-dropdown-group'>
+        <span id={label}>{label} </span>
+        {
+          <span className='list-arrow' aria-hidden='true'>
+            {isTierOneExpanded ? <Icon display='caretFilledUp' /> : <Icon display='caretFilledDown' />}
+          </span>
+        }
+        <ul aria-expanded={isTierOneExpanded} role='group' tabIndex={-1} aria-labelledby={label} className={isTierOneExpanded ? '' : 'hide'}>
+          {currentOptions.map(tierTwo => {
+            const regionID = label + tierTwo
+            let isSelected = regionID === userSelectedTierTwoLabel
+            return (
+              <li
+                key={regionID}
+                className='selectable-item'
+                tabIndex={0}
+                role='treeitem'
+                aria-label={regionID}
+                aria-selected={isSelected}
+                data-value={tierTwo}
+                onClick={e => {
+                  handleSecondTierSelect(tierTwo)
+                }}
+              >
+                {isSelected ? <span aria-hidden='true'>{checkMark}</span> : ''}
+
+                {tierTwo}
+              </li>
+            )
+          })}
+        </ul>
+      </li>
+    </>
+  )
+}
+
+interface NestedDropdownProps {
+  data: Record<string, string | number>[]
+  tiers: [string, string] // index 0  is the parent index 1 is the child
+  listLabel: string
+  handleSelectedItems: Function
+}
+
+const NestedDropdown: React.FC<NestedDropdownProps> = ({ data, tiers: [firstTierLabel, secondTierLabel], listLabel, handleSelectedItems }) => {
+  const optsMemo: Record<string, (string | number)[]> = {}
+
+  data.forEach(value => {
+    const tierOne = value[firstTierLabel]
+    const tierTwo = value[secondTierLabel]
+    if (optsMemo[tierOne]) {
+      optsMemo[tierOne].push(tierTwo)
+    } else {
+      optsMemo[tierOne] = [tierTwo]
+    }
+  })
+
+  const [userSelectedTierTwoLabel, setUserSelectedTierTwoLabel] = useState(null)
+  const [userSearchTerm, setUserSearchTerm] = useState('')
+  const [inputValue, setInputValue] = useState('')
+  const [inputHasFocus, setInputHasFocus] = useState(false)
+  const [isListOpened, setIsListOpened] = useState(false)
+
+  const searchInput = useRef(null)
+  const searchDropdown = useRef(null)
+
+  const chooseSelectedSecondTier = (tierOne: string, tierTwo: string) => {
+    searchInput.current.focus()
+    const selectedItemValue = tierTwo
+    setUserSelectedTierTwoLabel(tierOne + tierTwo)
+    setUserSearchTerm('')
+    setIsListOpened(false)
+    setInputValue(selectedItemValue)
+    handleSelectedItems(tierOne, tierTwo)
+  }
+
+  const handleKeyUp = e => {
+    const { nodeName, className, parentNode, nextSibling, lastChild, previousSibling } = e.target
+    const Dropdown = searchDropdown.current
+    switch (e.key) {
+      case 'ArrowDown': {
+        if (nodeName === 'INPUT') {
+          setIsListOpened(true)
+          // Move focus from Input to top of dropdown
+          Dropdown.firstChild.focus()
+        } else if (className === 'selectable-item') {
+          // 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()
+        } else if (lastChild.className === 'hide') {
+          // If Tier One is collapsed, move to next Tier One or move focus back to the top Input
+          const itemToFocusOnAfterKeyUp = nextSibling ?? searchInput.current
+          itemToFocusOnAfterKeyUp.focus()
+        } else {
+          // If Tier One is open, move focus to Tier Two
+          lastChild?.firstChild?.focus()
+        }
+        break
+      }
+
+      case 'ArrowUp': {
+        if (nodeName === 'INPUT') {
+          setIsListOpened(true)
+          if (Dropdown.lastChild.lastChild.className === 'hide') {
+            // Move focus from Input textbox to the last collapsed Tier Two in dropdown
+            Dropdown.lastChild.focus()
+          } else {
+            // Move focus to last item of the last collapsed Tier Two in dropdown
+            Dropdown.lastChild.lastChild.lastChild.focus()
+          }
+        } else if (className === 'selectable-item') {
+          // 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
+          itemToFocusOnAfterKeyUp.focus()
+        } else {
+          // Move focus from top of the dropdown to Input
+          searchInput?.current.focus()
+        }
+        break
+      }
+
+      case 'ArrowLeft': {
+        if (nodeName === 'INPUT') {
+          setIsListOpened(false)
+        }
+        break
+      }
+
+      case 'ArrowRight': {
+        if (nodeName === 'INPUT') {
+          setIsListOpened(true)
+        }
+        break
+      }
+
+      case 'Escape':
+        {
+          setIsListOpened(false)
+          searchInput.current.focus()
+        }
+        break
+    }
+  }
+
+  const filterOptions: Record<string, (string | number)[]> = useMemo(() => {
+    if (!userSearchTerm) return optsMemo
+    const newOptions: Record<string, (string | number)[]> = {}
+    const newRegex = new RegExp(`^${userSearchTerm}`, 'i')
+    for (const tierOne in optsMemo) {
+      if (tierOne.match(newRegex)) {
+        newOptions[tierOne] = [...optsMemo[tierOne]]
+      } else {
+        const newSecondTierOptions = optsMemo[tierOne].filter(tierTwo => String(tierTwo).match(newRegex))
+        if (newSecondTierOptions.length > 0) {
+          newOptions[tierOne] = newSecondTierOptions
+        }
+      }
+    }
+    return newOptions
+  }, [userSearchTerm])
+
+  const filterOptionsKeys = Object.keys(filterOptions)
+
+  const handleSearchTermChange = e => {
+    const newSearchTerm = e.target.value
+    setIsListOpened(true)
+    setUserSearchTerm(newSearchTerm)
+    setInputValue(newSearchTerm)
+  }
+
+  return (
+    <>
+      <div id='nested-dropdown-container' className='nested-dropdown' onKeyUp={handleKeyUp}>
+        <div className='nested-dropdown-input-container' aria-label='searchInput' role='textbox'>
+          <input
+            className='search-input'
+            ref={searchInput}
+            aria-label='searchInput'
+            aria-haspopup='true'
+            aria-hidden='false'
+            tabIndex={0}
+            value={inputValue}
+            onChange={handleSearchTermChange}
+            placeholder={'Select or type to search'}
+            onClick={() => {
+              if (inputHasFocus) setIsListOpened(!isListOpened)
+            }}
+            onFocus={() => setInputHasFocus(true)}
+            onBlur={() => setInputHasFocus(false)}
+          />
+          <span className='list-arrow' aria-hidden={true}>
+            {isListOpened ? <Icon display='caretFilledUp' /> : <Icon display='caretFilledDown' />}
+          </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 && filterOptionsKeys.length > 0
+            ? filterOptionsKeys.map((tierOne: string) => {
+                return (
+                  <Options
+                    currentOptions={filterOptions[tierOne]}
+                    label={tierOne}
+                    handleSecondTierSelect={(tierTwo: string) => {
+                      chooseSelectedSecondTier(tierOne, tierTwo)
+                    }}
+                    userSelectedTierTwoLabel={userSelectedTierTwoLabel}
+                    userSearchTerm={userSearchTerm}
+                  />
+                )
+              })
+            : 'There are no matching items'}
+        </ul>
+      </div>
+    </>
+  )
+}
+
+export default NestedDropdown

package/components/NestedDropdown/index.ts

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

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -0,0 +1,70 @@
+.nested-dropdown {
+  li {
+    list-style: none;
+    cursor: pointer;
+
+    &:focus {
+      border: 2px solid var(--orange);
+    }
+  }
+
+  .search-input {
+    border: none;
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .main-nested-dropdown-container,
+  .nested-dropdown-input-container {
+    padding: 7px 15px;
+    background: #fff;
+    border: 1px solid var(--lightGray);
+    border-radius: 5px;
+    width: 325px;
+    cursor: pointer;
+  }
+
+  .selectable-item:hover {
+    background-color: var(--lightGray);
+  }
+
+  & > div {
+    position: relative;
+    & > span.list-arrow {
+      position: absolute;
+      font-size: 10px;
+      top: 4px;
+      right: 12px;
+      padding: 9px;
+      background: #fff;
+      pointer-events: none;
+    }
+  }
+
+  & > ul {
+    max-height: 375px;
+    overflow-y: scroll;
+    position: absolute;
+    z-index: 3;
+    width: 375px;
+
+    & > li {
+      font-weight: bold;
+
+      & > ul > li {
+        position: relative;
+        font-weight: normal;
+        white-space: nowrap;
+        & > span {
+          position: absolute;
+          left: -20px;
+        }
+      }
+    }
+  }
+
+  .hide {
+    display: none;
+  }
+}

package/components/Table/Table.tsx

@@ -19,12 +19,14 @@ type TableProps = {
   }
   wrapColumns?: boolean
   hasRowType?: boolean // if it has row type then the first column is the row type which will explain how to render the row
+  fontSize: 'small' | 'medium' | 'large'
+  viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
 }
 
 type Position = 'sticky'
 
-const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent, tableOptions, wrapColumns, hasRowType }: TableProps) => {
-  const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 999 } : {}
+const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent, tableOptions, wrapColumns, hasRowType, fontSize, viewport }: TableProps) => {
+  const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 2 } : {}
   const isGroupedMatrix = !Array.isArray(childrenMatrix)
   return (
     <table {...tableOptions}>
@@ -37,7 +39,7 @@ const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent,
               const rows = childrenMatrix[groupName].map((row, i) => {
                 colSpan = row.length
                 const key = `${tableName}-${groupName}-row-${i}`
-                return <Row key={key} rowKey={key} childRow={row} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} />
+                return <Row 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]
             })
@@ -47,17 +49,17 @@ const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent,
               if (hasRowType) rowType = childRowCopy.shift()
               const key = `${tableName}-row-${i}`
               if (rowType === undefined) {
-                return <Row key={key} rowKey={key} childRow={childRow} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} />
+                return <Row 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 key={key} rowKey={key} childRow={childRowCopy} isTotal={true} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} />
+                    return <Row 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 key={key} rowKey={key} childRow={childRowCopy} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} />
+                    return <Row key={key} rowKey={key} childRow={childRowCopy} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
                 }
               }
             })}

package/components/Table/components/Row.tsx

@@ -7,15 +7,19 @@ type RowProps = {
   wrapColumns: boolean
   isTotal?: boolean
   cellMinWidth?: number
+  fontSize: 'small' | 'medium' | 'large'
+  viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
 }
 
-const Row = ({ childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal }: RowProps) => {
+const Row = ({ childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal, fontSize, viewport }: RowProps) => {
   const whiteSpace = wrapColumns ? 'unset' : 'nowrap'
   const minWidth = cellMinWidth + 'px'
+  const fontSizes = { small: 16, medium: 18, large: 20 }
+  const cellFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '11px' : `${fontSizes[fontSize]}px`
   return (
     <tr>
       {childRow.map((child, i) => (
-        <Cell key={rowKey + '__' + i} style={{ whiteSpace, minWidth }} isBold={isTotal}>
+        <Cell key={rowKey + '__' + i} style={{ whiteSpace, minWidth, fontSize: cellFontSize }} isBold={isTotal}>
           {child}
         </Cell>
       ))}

package/components/Table/types/RowType.ts

@@ -3,3 +3,6 @@ export enum RowType {
   total = 'total',
   row_group_total = 'row_group_total'
 }
+
+// The only distinction between total and row_group_total is the way the UI renders it.
+// They function otherwise the same a regular row.

package/components/Waiting.jsx

@@ -1,8 +1,18 @@
 import React from 'react'
 import '../styles/waiting.scss'
 
+const styles = {
+  position: 'relative',
+  height: '100vh',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gridArea: 'content'
+}
+
 export default ({ requiredColumns, className }) => (
-  <section className={className}>
+  <section className={className} style={styles}>
     <section className='waiting-container'>
       <h3>Configuration Required</h3>
       <p>

package/components/_stories/MultiSelect.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react'
 
 import MultiSelect from '../MultiSelect'
+import { userEvent, within } from '@storybook/testing-library'
 
 const meta: Meta<typeof MultiSelect> = {
   title: 'Components/Molecules/MultiSelect',
@@ -14,10 +15,18 @@ export const Primary: Story = {
     options: [
       { value: '1', label: 'One' },
       { value: '2', label: 'Two' },
-      { value: '3', label: 'Three' }
+      { value: '3', label: 'Three' },
+      { value: '4', label: 'This is a really long option' }
     ],
+    selected: ['1', '2'],
+    limit: 3,
     label: 'MultiSelect',
     updateField: (section, subsection, fieldName, value) => {}
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const questionMark = canvas.getByRole('dialog')
+    await userEvent.hover(questionMark)
   }
 }