@instructure/ui-select 11.0.1-snapshot-1 → 11.0.1-snapshot-2

package/src/Select/README.md

@@ -17,159 +17,10 @@ describes: Select
 
 `Select` is a controlled-only component. The consuming app or component must manage any state needed. A variety of request callbacks are provided as prompts for state updates. `onRequestShowOptions`, for example, is fired when `Select` thinks the `isShowingOptions` prop should be updated to `true`. Of course, the consumer can always choose how to react to these callbacks.
 
-- ```javascript
-  class SingleSelectExample extends React.Component {
-    state = {
-      inputValue: this.props.options[0].label,
-      isShowingOptions: false,
-      highlightedOptionId: null,
-      selectedOptionId: this.props.options[0].id,
-      announcement: null
-    }
-    inputElement = null
-
-    focusInput = () => {
-      if (this.inputElement) {
-        this.inputElement.blur()
-        this.inputElement.focus()
-      }
-    }
-
-    getOptionById(queryId) {
-      return this.props.options.find(({ id }) => id === queryId)
-    }
-
-    handleShowOptions = (event) => {
-      const { options } = this.props
-      const { inputValue, selectedOptionId } = this.state
-
-      this.setState({
-        isShowingOptions: true
-      })
-      if (inputValue || selectedOptionId || options.length === 0) return
-
-      switch (event.key) {
-        case 'ArrowDown':
-          return this.handleHighlightOption(event, { id: options[0].id })
-        case 'ArrowUp':
-          return this.handleHighlightOption(event, {
-            id: options[options.length - 1].id
-          })
-      }
-    }
-
-    handleHideOptions = (event) => {
-      const { selectedOptionId } = this.state
-      const option = this.getOptionById(selectedOptionId)?.label
-      this.setState({
-        isShowingOptions: false,
-        highlightedOptionId: null,
-        inputValue: selectedOptionId ? option : '',
-        announcement: 'List collapsed.'
-      })
-    }
-
-    handleBlur = (event) => {
-      this.setState({
-        highlightedOptionId: null
-      })
-    }
-
-    handleHighlightOption = (event, { id }) => {
-      event.persist()
-      const optionsAvailable = `${this.props.options.length} options available.`
-      const nowOpen = !this.state.isShowingOptions
-        ? `List expanded. ${optionsAvailable}`
-        : ''
-      const option = this.getOptionById(id)?.label
-      this.setState((state) => ({
-        highlightedOptionId: id,
-        inputValue: state.inputValue,
-        announcement: `${option} ${nowOpen}`
-      }))
-    }
-
-    handleSelectOption = (event, { id }) => {
-      this.focusInput()
-      const option = this.getOptionById(id)?.label
-      this.setState({
-        selectedOptionId: id,
-        inputValue: option,
-        isShowingOptions: false,
-        announcement: `"${option}" selected. List collapsed.`
-      })
-    }
-
-    render() {
-      const {
-        inputValue,
-        isShowingOptions,
-        highlightedOptionId,
-        selectedOptionId,
-        announcement
-      } = this.state
-
-      return (
-        <div>
-          <Select
-            renderLabel="Single Select"
-            assistiveText="Use arrow keys to navigate options."
-            inputValue={inputValue}
-            isShowingOptions={isShowingOptions}
-            onBlur={this.handleBlur}
-            onRequestShowOptions={this.handleShowOptions}
-            onRequestHideOptions={this.handleHideOptions}
-            onRequestHighlightOption={this.handleHighlightOption}
-            onRequestSelectOption={this.handleSelectOption}
-            inputRef={(el) => {
-              this.inputElement = el
-            }}
-          >
-            {this.props.options.map((option) => {
-              return (
-                <Select.Option
-                  id={option.id}
-                  key={option.id}
-                  isHighlighted={option.id === highlightedOptionId}
-                  isSelected={option.id === selectedOptionId}
-                >
-                  {option.label}
-                </Select.Option>
-              )
-            })}
-          </Select>
-        </div>
-      )
-    }
-  }
-
-  render(
-    <View>
-      <SingleSelectExample
-        options={[
-          { id: 'opt1', label: 'Alaska' },
-          { id: 'opt2', label: 'American Samoa' },
-          { id: 'opt3', label: 'Arizona' },
-          { id: 'opt4', label: 'Arkansas' },
-          { id: 'opt5', label: 'California' },
-          { id: 'opt6', label: 'Colorado' },
-          { id: 'opt7', label: 'Connecticut' },
-          { id: 'opt8', label: 'Delaware' },
-          { id: 'opt9', label: 'District Of Columbia' },
-          { id: 'opt10', label: 'Federated States Of Micronesia' },
-          { id: 'opt11', label: 'Florida' },
-          { id: 'opt12', label: 'Georgia (unavailable)' },
-          { id: 'opt13', label: 'Guam' },
-          { id: 'opt14', label: 'Hawaii' },
-          { id: 'opt15', label: 'Idaho' },
-          { id: 'opt16', label: 'Illinois' }
-        ]}
-      />
-    </View>
-  )
-  ```
-
-- ```js
+```js
+---
+type: example
+---
   const SingleSelectExample = ({ options }) => {
     const [inputValue, setInputValue] = useState(options[0].label)
     const [isShowingOptions, setIsShowingOptions] = useState(false)
@@ -292,7 +143,7 @@ describes: Select
       />
     </View>
   )
-  ```
+```
 
 #### Providing autocomplete behavior
 
@@ -300,250 +151,10 @@ It's best practice to always provide autocomplete functionality to help users ma
 
 > Note: Select makes some conditional assumptions about keyboard behavior. For example, if the list is NOT showing, up/down arrow keys and the space key, will show the list. Otherwise, the arrows will navigate options and the space key will type a space character.
 
-- ```javascript
-  class AutocompleteExample extends React.Component {
-    state = {
-      inputValue: '',
-      isShowingOptions: false,
-      highlightedOptionId: null,
-      selectedOptionId: null,
-      filteredOptions: this.props.options,
-      announcement: null
-    }
-    inputElement = null
-
-    getOptionById(queryId) {
-      return this.props.options.find(({ id }) => id === queryId)
-    }
-
-    getOptionsChangedMessage(newOptions) {
-      let message =
-        newOptions.length !== this.state.filteredOptions.length
-          ? `${newOptions.length} options available.` // options changed, announce new total
-          : null // options haven't changed, don't announce
-      if (message && newOptions.length > 0) {
-        // options still available
-        if (this.state.highlightedOptionId !== newOptions[0].id) {
-          // highlighted option hasn't been announced
-          const option = this.getOptionById(newOptions[0].id).label
-          message = `${option}. ${message}`
-        }
-      }
-      return message
-    }
-
-    filterOptions = (value) => {
-      return this.props.options.filter((option) =>
-        option.label.toLowerCase().startsWith(value.toLowerCase())
-      )
-    }
-
-    focusInput = () => {
-      if (this.inputElement) {
-        this.inputElement.blur()
-        this.inputElement.focus()
-      }
-    }
-
-    matchValue() {
-      const {
-        filteredOptions,
-        inputValue,
-        highlightedOptionId,
-        selectedOptionId
-      } = this.state
-
-      // an option matching user input exists
-      if (filteredOptions.length === 1) {
-        const onlyOption = filteredOptions[0]
-        // automatically select the matching option
-        if (onlyOption.label.toLowerCase() === inputValue.toLowerCase()) {
-          return {
-            inputValue: onlyOption.label,
-            selectedOptionId: onlyOption.id,
-            filteredOptions: this.filterOptions('')
-          }
-        }
-      }
-      // allow user to return to empty input and no selection
-      if (inputValue.length === 0) {
-        return { selectedOptionId: null }
-      }
-      // no match found, return selected option label to input
-      if (selectedOptionId) {
-        const selectedOption = this.getOptionById(selectedOptionId)
-        return { inputValue: selectedOption.label }
-      }
-      // input value is from highlighted option, not user input
-      // clear input, reset options
-      if (highlightedOptionId) {
-        if (inputValue === this.getOptionById(highlightedOptionId).label) {
-          return {
-            inputValue: '',
-            filteredOptions: this.filterOptions('')
-          }
-        }
-      }
-    }
-
-    handleShowOptions = (event) => {
-      const { options } = this.props
-      const { inputValue, selectedOptionId } = this.state
-
-      this.setState(({ filteredOptions }) => ({
-        isShowingOptions: true,
-        announcement: `List expanded. ${filteredOptions.length} options available.`
-      }))
-
-      if (inputValue || selectedOptionId || options.length === 0) return
-
-      switch (event.key) {
-        case 'ArrowDown':
-          return this.handleHighlightOption(event, { id: options[0].id })
-        case 'ArrowUp':
-          return this.handleHighlightOption(event, {
-            id: options[options.length - 1].id
-          })
-      }
-    }
-
-    handleHideOptions = (event) => {
-      const { selectedOptionId, inputValue } = this.state
-      this.setState({
-        isShowingOptions: false,
-        highlightedOptionId: null,
-        announcement: 'List collapsed.',
-        ...this.matchValue()
-      })
-    }
-
-    handleBlur = (event) => {
-      this.setState({ highlightedOptionId: null })
-    }
-
-    handleHighlightOption = (event, { id }) => {
-      event.persist()
-      const option = this.getOptionById(id)
-      if (!option) return // prevent highlighting of empty option
-      this.setState((state) => ({
-        highlightedOptionId: id,
-        inputValue: state.inputValue,
-        announcement: option.label
-      }))
-    }
-
-    handleSelectOption = (event, { id }) => {
-      const option = this.getOptionById(id)
-      if (!option) return // prevent selecting of empty option
-      this.focusInput()
-      this.setState({
-        selectedOptionId: id,
-        inputValue: option.label,
-        isShowingOptions: false,
-        filteredOptions: this.props.options,
-        announcement: `${option.label} selected. List collapsed.`
-      })
-    }
-
-    handleInputChange = (event) => {
-      const value = event.target.value
-      const newOptions = this.filterOptions(value)
-      this.setState((state) => ({
-        inputValue: value,
-        filteredOptions: newOptions,
-        highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : null,
-        isShowingOptions: true,
-        selectedOptionId: value === '' ? null : state.selectedOptionId,
-        announcement: this.getOptionsChangedMessage(newOptions)
-      }))
-    }
-
-    render() {
-      const {
-        inputValue,
-        isShowingOptions,
-        highlightedOptionId,
-        selectedOptionId,
-        filteredOptions,
-        announcement
-      } = this.state
-
-      return (
-        <div>
-          <Select
-            renderLabel="Autocomplete"
-            assistiveText="Type or use arrow keys to navigate options."
-            placeholder="Start typing to search..."
-            inputValue={inputValue}
-            isShowingOptions={isShowingOptions}
-            onBlur={this.handleBlur}
-            onInputChange={this.handleInputChange}
-            onRequestShowOptions={this.handleShowOptions}
-            onRequestHideOptions={this.handleHideOptions}
-            onRequestHighlightOption={this.handleHighlightOption}
-            onRequestSelectOption={this.handleSelectOption}
-            renderBeforeInput={<IconUserSolid inline={false} />}
-            renderAfterInput={<IconSearchLine inline={false} />}
-            inputRef={(el) => {
-              this.inputElement = el
-            }}
-          >
-            {filteredOptions.length > 0 ? (
-              filteredOptions.map((option) => {
-                return (
-                  <Select.Option
-                    id={option.id}
-                    key={option.id}
-                    isHighlighted={option.id === highlightedOptionId}
-                    isSelected={option.id === selectedOptionId}
-                    isDisabled={option.disabled}
-                    renderBeforeLabel={
-                      !option.disabled ? IconUserSolid : IconUserLine
-                    }
-                  >
-                    {!option.disabled
-                      ? option.label
-                      : `${option.label} (unavailable)`}
-                  </Select.Option>
-                )
-              })
-            ) : (
-              <Select.Option id="empty-option" key="empty-option">
-                ---
-              </Select.Option>
-            )}
-          </Select>
-        </div>
-      )
-    }
-  }
-
-  render(
-    <View>
-      <AutocompleteExample
-        options={[
-          { id: 'opt0', label: 'Aaron Aaronson' },
-          { id: 'opt1', label: 'Amber Murphy' },
-          { id: 'opt2', label: 'Andrew Miller' },
-          { id: 'opt3', label: 'Barbara Ward' },
-          { id: 'opt4', label: 'Byron Cranston', disabled: true },
-          { id: 'opt5', label: 'Dennis Reynolds' },
-          { id: 'opt6', label: 'Dee Reynolds' },
-          { id: 'opt7', label: 'Ezra Betterthan' },
-          { id: 'opt8', label: 'Jeff Spicoli' },
-          { id: 'opt9', label: 'Joseph Smith' },
-          { id: 'opt10', label: 'Jasmine Diaz' },
-          { id: 'opt11', label: 'Martin Harris' },
-          { id: 'opt12', label: 'Michael Morgan', disabled: true },
-          { id: 'opt13', label: 'Michelle Rodriguez' },
-          { id: 'opt14', label: 'Ziggy Stardust' }
-        ]}
-      />
-    </View>
-  )
-  ```
-
-- ```js
+```js
+---
+type: example
+---
   const AutocompleteExample = ({ options }) => {
     const [inputValue, setInputValue] = useState('')
     const [isShowingOptions, setIsShowingOptions] = useState(false)
@@ -747,107 +358,93 @@ It's best practice to always provide autocomplete functionality to help users ma
       />
     </View>
   )
-  ```
+```
 
 #### Highlighting and selecting options
 
 To mark an option as "highlighted", use the option's `isHighlighted` prop. Note that only one highlighted option is permitted. Similarly, use `isSelected` to mark an option or multiple options as "selected". When allowing multiple selections, it's best to render a [Tag](#Tag) with [AccessibleContent](#AccessibleContent) for each selected option via the `renderBeforeInput` prop.
 
-- ```javascript
-  class MultipleSelectExample extends React.Component {
-    state = {
-      inputValue: '',
-      isShowingOptions: false,
-      highlightedOptionId: null,
-      selectedOptionId: ['opt1', 'opt6'],
-      filteredOptions: this.props.options,
-      announcement: null
-    }
-
-    inputRef = null
+```js
+---
+type: example
+---
+  const MultipleSelectExample = ({ options }) => {
+    const [inputValue, setInputValue] = useState('')
+    const [isShowingOptions, setIsShowingOptions] = useState(false)
+    const [highlightedOptionId, setHighlightedOptionId] = useState(null)
+    const [selectedOptionId, setSelectedOptionId] = useState(['opt1', 'opt6'])
+    const [filteredOptions, setFilteredOptions] = useState(options)
+    const [announcement, setAnnouncement] = useState(null)
+    const inputRef = useRef()
 
-    focusInput = () => {
-      if (this.inputRef) {
-        this.inputRef.blur()
-        this.inputRef.focus()
+    const focusInput = () => {
+      if (inputRef.current) {
+        inputRef.current.blur()
+        inputRef.current.focus()
       }
     }
 
-    getOptionById(queryId) {
-      return this.props.options.find(({ id }) => id === queryId)
+    const getOptionById = (queryId) => {
+      return options.find(({ id }) => id === queryId)
     }
 
-    getOptionsChangedMessage(newOptions) {
+    const getOptionsChangedMessage = (newOptions) => {
       let message =
-        newOptions.length !== this.state.filteredOptions.length
+        newOptions.length !== filteredOptions.length
           ? `${newOptions.length} options available.` // options changed, announce new total
           : null // options haven't changed, don't announce
       if (message && newOptions.length > 0) {
         // options still available
-        if (this.state.highlightedOptionId !== newOptions[0].id) {
+        if (highlightedOptionId !== newOptions[0].id) {
           // highlighted option hasn't been announced
-          const option = this.getOptionById(newOptions[0].id).label
+          const option = getOptionById(newOptions[0].id).label
           message = `${option}. ${message}`
         }
       }
       return message
     }
 
-    filterOptions = (value) => {
-      return this.props.options.filter((option) =>
+    const filterOptions = (value) => {
+      return options.filter((option) =>
         option.label.toLowerCase().startsWith(value.toLowerCase())
       )
     }
 
-    matchValue() {
-      const {
-        filteredOptions,
-        inputValue,
-        highlightedOptionId,
-        selectedOptionId
-      } = this.state
-
+    const matchValue = () => {
       // an option matching user input exists
       if (filteredOptions.length === 1) {
         const onlyOption = filteredOptions[0]
         // automatically select the matching option
         if (onlyOption.label.toLowerCase() === inputValue.toLowerCase()) {
-          return {
-            inputValue: '',
-            selectedOptionId: [...selectedOptionId, onlyOption.id],
-            filteredOptions: this.filterOptions('')
-          }
+          setInputValue('')
+          setSelectedOptionId([...selectedOptionId, onlyOption.id])
+          setFilteredOptions(filterOptions(''))
         }
       }
       // input value is from highlighted option, not user input
       // clear input, reset options
-      if (highlightedOptionId) {
-        if (inputValue === this.getOptionById(highlightedOptionId).label) {
-          return {
-            inputValue: '',
-            filteredOptions: this.filterOptions('')
-          }
+      else if (highlightedOptionId) {
+        if (inputValue === getOptionById(highlightedOptionId).label) {
+          setInputValue('')
+          setFilteredOptions(filterOptions(''))
         }
       }
     }
 
-    handleShowOptions = (event) => {
-      const { options } = this.props
-      const { inputValue, selectedOptionId } = this.state
-
-      this.setState({ isShowingOptions: true })
+    const handleShowOptions = (event) => {
+      setIsShowingOptions(true)
 
       if (inputValue || options.length === 0) return
 
       switch (event.key) {
         case 'ArrowDown':
-          return this.handleHighlightOption(event, {
+          return handleHighlightOption(event, {
             id: options.find((option) => !selectedOptionId.includes(option.id))
               .id
           })
         case 'ArrowUp':
           // Highlight last non-selected option
-          return this.handleHighlightOption(event, {
+          return handleHighlightOption(event, {
             id: options[
               options.findLastIndex(
                 (option) => !selectedOptionId.includes(option.id)
@@ -857,317 +454,47 @@ To mark an option as "highlighted", use the option's `isHighlighted` prop. Note
       }
     }
 
-    handleHideOptions = (event) => {
-      this.setState({
-        isShowingOptions: false,
-        ...this.matchValue()
-      })
+    const handleHideOptions = (event) => {
+      setIsShowingOptions(false)
+      matchValue()
     }
 
-    handleBlur = (event) => {
-      this.setState({
-        highlightedOptionId: null
-      })
+    const handleBlur = (event) => {
+      setHighlightedOptionId(null)
     }
 
-    handleHighlightOption = (event, { id }) => {
+    const handleHighlightOption = (event, { id }) => {
       event.persist()
-      const option = this.getOptionById(id)
+      const option = getOptionById(id)
       if (!option) return // prevent highlighting empty option
-      this.setState((state) => ({
-        highlightedOptionId: id,
-        inputValue: state.inputValue,
-        announcement: option.label
-      }))
+      setHighlightedOptionId(id)
+      setInputValue(inputValue)
+      setAnnouncement(option.label)
     }
 
-    handleSelectOption = (event, { id }) => {
-      this.focusInput()
-      const option = this.getOptionById(id)
+    const handleSelectOption = (event, { id }) => {
+      const option = getOptionById(id)
       if (!option) return // prevent selecting of empty option
-      this.setState((state) => ({
-        selectedOptionId: [...state.selectedOptionId, id],
-        highlightedOptionId: null,
-        filteredOptions: this.filterOptions(''),
-        inputValue: '',
-        isShowingOptions: false,
-        announcement: `${option.label} selected. List collapsed.`
-      }))
+      focusInput()
+      setSelectedOptionId([...selectedOptionId, id])
+      setHighlightedOptionId(null)
+      setFilteredOptions(filterOptions(''))
+      setInputValue('')
+      setIsShowingOptions(false)
+      setAnnouncement(`${option.label} selected. List collapsed.`)
     }
 
-    handleInputChange = (event) => {
+    const handleInputChange = (event) => {
       const value = event.target.value
-      const newOptions = this.filterOptions(value)
-      this.setState({
-        inputValue: value,
-        filteredOptions: newOptions,
-        highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : null,
-        isShowingOptions: true,
-        announcement: this.getOptionsChangedMessage(newOptions)
-      })
+      const newOptions = filterOptions(value)
+      setInputValue(value)
+      setFilteredOptions(newOptions)
+      sethHighlightedOptionId(newOptions.length > 0 ? newOptions[0].id : null)
+      setIsShowingOptions(true)
+      setAnnouncement(getOptionsChangedMessage(newOptions))
     }
 
-    handleKeyDown = (event) => {
-      const { selectedOptionId, inputValue } = this.state
-      if (event.keyCode === 8) {
-        // when backspace key is pressed
-        if (inputValue === '' && selectedOptionId.length > 0) {
-          // remove last selected option, if input has no entered text
-          this.setState((state) => ({
-            highlightedOptionId: null,
-            selectedOptionId: state.selectedOptionId.slice(0, -1)
-          }))
-        }
-      }
-    }
-    // remove a selected option tag
-    dismissTag(e, tag) {
-      // prevent closing of list
-      e.stopPropagation()
-      e.preventDefault()
-
-      const newSelection = this.state.selectedOptionId.filter(
-        (id) => id !== tag
-      )
-      this.setState(
-        {
-          selectedOptionId: newSelection,
-          highlightedOptionId: null,
-          announcement: `${this.getOptionById(tag).label} removed`
-        },
-        () => {
-          this.inputRef.focus()
-        }
-      )
-    }
-    // render tags when multiple options are selected
-    renderTags() {
-      const { selectedOptionId } = this.state
-      return selectedOptionId.map((id, index) => (
-        <Tag
-          dismissible
-          key={id}
-          text={
-            <AccessibleContent alt={`Remove ${this.getOptionById(id).label}`}>
-              {this.getOptionById(id)?.label}
-            </AccessibleContent>
-          }
-          margin={
-            index > 0 ? 'xxx-small xx-small xxx-small 0' : '0 xx-small 0 0'
-          }
-          onClick={(e) => this.dismissTag(e, id)}
-        />
-      ))
-    }
-
-    render() {
-      const {
-        inputValue,
-        isShowingOptions,
-        highlightedOptionId,
-        selectedOptionId,
-        filteredOptions,
-        announcement
-      } = this.state
-
-      return (
-        <div>
-          <Select
-            renderLabel="Multiple Select"
-            assistiveText="Type or use arrow keys to navigate options. Multiple selections allowed."
-            inputValue={inputValue}
-            isShowingOptions={isShowingOptions}
-            inputRef={(el) => (this.inputRef = el)}
-            onBlur={this.handleBlur}
-            onInputChange={this.handleInputChange}
-            onRequestShowOptions={this.handleShowOptions}
-            onRequestHideOptions={this.handleHideOptions}
-            onRequestHighlightOption={this.handleHighlightOption}
-            onRequestSelectOption={this.handleSelectOption}
-            onKeyDown={this.handleKeyDown}
-            renderBeforeInput={
-              selectedOptionId.length > 0 ? this.renderTags() : null
-            }
-          >
-            {filteredOptions.length > 0 ? (
-              filteredOptions.map((option, index) => {
-                if (selectedOptionId.indexOf(option.id) === -1) {
-                  return (
-                    <Select.Option
-                      id={option.id}
-                      key={option.id}
-                      isHighlighted={option.id === highlightedOptionId}
-                    >
-                      {option.label}
-                    </Select.Option>
-                  )
-                }
-              })
-            ) : (
-              <Select.Option id="empty-option" key="empty-option">
-                ---
-              </Select.Option>
-            )}
-          </Select>
-        </div>
-      )
-    }
-  }
-
-  render(
-    <View>
-      <MultipleSelectExample
-        options={[
-          { id: 'opt1', label: 'Alaska' },
-          { id: 'opt2', label: 'American Samoa' },
-          { id: 'opt3', label: 'Arizona' },
-          { id: 'opt4', label: 'Arkansas' },
-          { id: 'opt5', label: 'California' },
-          { id: 'opt6', label: 'Colorado' },
-          { id: 'opt7', label: 'Connecticut' },
-          { id: 'opt8', label: 'Delaware' },
-          { id: 'opt9', label: 'District Of Columbia' },
-          { id: 'opt10', label: 'Federated States Of Micronesia' },
-          { id: 'opt11', label: 'Florida' },
-          { id: 'opt12', label: 'Georgia (unavailable)' },
-          { id: 'opt13', label: 'Guam' },
-          { id: 'opt14', label: 'Hawaii' },
-          { id: 'opt15', label: 'Idaho' },
-          { id: 'opt16', label: 'Illinois' }
-        ]}
-      />
-    </View>
-  )
-  ```
-
-- ```js
-  const MultipleSelectExample = ({ options }) => {
-    const [inputValue, setInputValue] = useState('')
-    const [isShowingOptions, setIsShowingOptions] = useState(false)
-    const [highlightedOptionId, setHighlightedOptionId] = useState(null)
-    const [selectedOptionId, setSelectedOptionId] = useState(['opt1', 'opt6'])
-    const [filteredOptions, setFilteredOptions] = useState(options)
-    const [announcement, setAnnouncement] = useState(null)
-    const inputRef = useRef()
-
-    const focusInput = () => {
-      if (inputRef.current) {
-        inputRef.current.blur()
-        inputRef.current.focus()
-      }
-    }
-
-    const getOptionById = (queryId) => {
-      return options.find(({ id }) => id === queryId)
-    }
-
-    const getOptionsChangedMessage = (newOptions) => {
-      let message =
-        newOptions.length !== filteredOptions.length
-          ? `${newOptions.length} options available.` // options changed, announce new total
-          : null // options haven't changed, don't announce
-      if (message && newOptions.length > 0) {
-        // options still available
-        if (highlightedOptionId !== newOptions[0].id) {
-          // highlighted option hasn't been announced
-          const option = getOptionById(newOptions[0].id).label
-          message = `${option}. ${message}`
-        }
-      }
-      return message
-    }
-
-    const filterOptions = (value) => {
-      return options.filter((option) =>
-        option.label.toLowerCase().startsWith(value.toLowerCase())
-      )
-    }
-
-    const matchValue = () => {
-      // an option matching user input exists
-      if (filteredOptions.length === 1) {
-        const onlyOption = filteredOptions[0]
-        // automatically select the matching option
-        if (onlyOption.label.toLowerCase() === inputValue.toLowerCase()) {
-          setInputValue('')
-          setSelectedOptionId([...selectedOptionId, onlyOption.id])
-          setFilteredOptions(filterOptions(''))
-        }
-      }
-      // input value is from highlighted option, not user input
-      // clear input, reset options
-      else if (highlightedOptionId) {
-        if (inputValue === getOptionById(highlightedOptionId).label) {
-          setInputValue('')
-          setFilteredOptions(filterOptions(''))
-        }
-      }
-    }
-
-    const handleShowOptions = (event) => {
-      setIsShowingOptions(true)
-
-      if (inputValue || options.length === 0) return
-
-      switch (event.key) {
-        case 'ArrowDown':
-          return handleHighlightOption(event, {
-            id: options.find((option) => !selectedOptionId.includes(option.id))
-              .id
-          })
-        case 'ArrowUp':
-          // Highlight last non-selected option
-          return handleHighlightOption(event, {
-            id: options[
-              options.findLastIndex(
-                (option) => !selectedOptionId.includes(option.id)
-              )
-            ].id
-          })
-      }
-    }
-
-    const handleHideOptions = (event) => {
-      setIsShowingOptions(false)
-      matchValue()
-    }
-
-    const handleBlur = (event) => {
-      setHighlightedOptionId(null)
-    }
-
-    const handleHighlightOption = (event, { id }) => {
-      event.persist()
-      const option = getOptionById(id)
-      if (!option) return // prevent highlighting empty option
-      setHighlightedOptionId(id)
-      setInputValue(inputValue)
-      setAnnouncement(option.label)
-    }
-
-    const handleSelectOption = (event, { id }) => {
-      const option = getOptionById(id)
-      if (!option) return // prevent selecting of empty option
-      focusInput()
-      setSelectedOptionId([...selectedOptionId, id])
-      setHighlightedOptionId(null)
-      setFilteredOptions(filterOptions(''))
-      setInputValue('')
-      setIsShowingOptions(false)
-      setAnnouncement(`${option.label} selected. List collapsed.`)
-    }
-
-    const handleInputChange = (event) => {
-      const value = event.target.value
-      const newOptions = filterOptions(value)
-      setInputValue(value)
-      setFilteredOptions(newOptions)
-      sethHighlightedOptionId(newOptions.length > 0 ? newOptions[0].id : null)
-      setIsShowingOptions(true)
-      setAnnouncement(getOptionsChangedMessage(newOptions))
-    }
-
-    const handleKeyDown = (event) => {
+    const handleKeyDown = (event) => {
       if (event.keyCode === 8) {
         // when backspace key is pressed
         if (inputValue === '' && selectedOptionId.length > 0) {
@@ -1278,1506 +605,713 @@ To mark an option as "highlighted", use the option's `isHighlighted` prop. Note
       />
     </View>
   )
-  ```
+```
 
 #### Composing option groups
 
 In addition to `<Select.Option />` Select also accepts `<Select.Group />` as children. This is meant to serve the same purpose as `<optgroup>` elements. Group only requires you provide a label via its `renderLabel` prop. Groups and their associated options also accept icons or other stylistic additions if needed.
 
-- ```javascript
-  class GroupSelectExample extends React.Component {
-    state = {
-      inputValue: this.props.options['Western'][0].label,
-      isShowingOptions: false,
-      highlightedOptionId: null,
-      selectedOptionId: this.props.options['Western'][0].id,
-      announcement: null
-    }
-
-    inputElement = null
+```js
+---
+type: example
+---
+const GroupSelectExample = ({ options }) => {
+  const [inputValue, setInputValue] = useState(options['Western'][0].label)
+  const [isShowingOptions, setIsShowingOptions] = useState(false)
+  const [highlightedOptionId, setHighlightedOptionId] = useState(null)
+  const [selectedOptionId, setSelectedOptionId] = useState(
+    options['Western'][0].id
+  )
+  const [announcement, setAnnouncement] = useState(null)
+  const inputRef = useRef()
 
-    focusInput = () => {
-      if (this.inputElement) {
-        this.inputElement.blur()
-        this.inputElement.focus()
-      }
+  const focusInput = () => {
+    if (inputRef.current) {
+      inputRef.current.blur()
+      inputRef.current.focus()
     }
+  }
 
-    getOptionById(id) {
-      const { options } = this.props
-      let match = null
-      Object.keys(options).forEach((key, index) => {
-        for (let i = 0; i < options[key].length; i++) {
-          const option = options[key][i]
-          if (id === option.id) {
-            // return group property with the object just to make it easier
-            // to check which group the option belongs to
-            match = { ...option, group: key }
-            break
-          }
+  const getOptionById = (id) => {
+    let match = null
+    Object.keys(options).forEach((key, index) => {
+      for (let i = 0; i < options[key].length; i++) {
+        const option = options[key][i]
+        if (id === option.id) {
+          // return group property with the object just to make it easier
+          // to check which group the option belongs to
+          match = { ...option, group: key }
+          break
         }
-      })
-      return match
-    }
-
-    getGroupChangedMessage(newOption) {
-      const currentOption = this.getOptionById(this.state.highlightedOptionId)
-      const isNewGroup =
-        !currentOption || currentOption.group !== newOption.group
-      let message = isNewGroup ? `Group ${newOption.group} entered. ` : ''
-      message += newOption.label
-      return message
-    }
-
-    handleShowOptions = (event) => {
-      const { options } = this.props
-      const { inputValue, selectedOptionId } = this.state
+      }
+    })
+    return match
+  }
 
-      this.setState({
-        isShowingOptions: true,
-        highlightedOptionId: null
-      })
+  const getGroupChangedMessage = (newOption) => {
+    const currentOption = getOptionById(highlightedOptionId)
+    const isNewGroup =
+      !currentOption || currentOption.group !== newOption.group
+    let message = isNewGroup ? `Group ${newOption.group} entered. ` : ''
+    message += newOption.label
+    return message
+  }
 
-      if (inputValue || selectedOptionId || options.length === 0) return
+  const handleShowOptions = (event) => {
+    setIsShowingOptions(true)
+    setHighlightedOptionId(null)
+    if (inputValue || selectedOptionId || options.length === 0) return
 
-      switch (event.key) {
-        case 'ArrowDown':
-          return this.handleHighlightOption(event, {
-            id: options[Object.keys(options)[0]][0].id
-          })
-        case 'ArrowUp':
-          return this.handleHighlightOption(event, {
-            id: Object.values(options).at(-1)?.at(-1)?.id
-          })
-      }
+    switch (event.key) {
+      case 'ArrowDown':
+        return handleHighlightOption(event, {
+          id: options[Object.keys(options)[0]][0].id
+        })
+      case 'ArrowUp':
+        return handleHighlightOption(event, {
+          id: Object.values(options).at(-1)?.at(-1)?.id
+        })
     }
+  }
 
-    handleHideOptions = (event) => {
-      const { selectedOptionId } = this.state
-      this.setState({
-        isShowingOptions: false,
-        highlightedOptionId: null,
-        inputValue: this.getOptionById(selectedOptionId)?.label
-      })
-    }
+  const handleHideOptions = (event) => {
+    setIsShowingOptions(false)
+    setHighlightedOptionId(null)
+    setInputValue(getOptionById(selectedOptionId)?.label)
+  }
 
-    handleBlur = (event) => {
-      this.setState({
-        highlightedOptionId: null
-      })
-    }
+  const handleBlur = (event) => {
+    setHighlightedOptionId(null)
+  }
 
-    handleHighlightOption = (event, { id }) => {
-      event.persist()
-      const newOption = this.getOptionById(id)
-      this.setState((state) => ({
-        highlightedOptionId: id,
-        inputValue: state.inputValue,
-        announcement: this.getGroupChangedMessage(newOption)
-      }))
-    }
+  const handleHighlightOption = (event, { id }) => {
+    event.persist()
+    const newOption = getOptionById(id)
+    setHighlightedOptionId(id)
+    setInputValue(inputValue)
+    setAnnouncement(getGroupChangedMessage(newOption))
+  }
 
-    handleSelectOption = (event, { id }) => {
-      this.focusInput()
-      this.setState({
-        selectedOptionId: id,
-        inputValue: this.getOptionById(id).label,
-        isShowingOptions: false,
-        announcement: `${this.getOptionById(id).label} selected.`
-      })
-    }
+  const handleSelectOption = (event, { id }) => {
+    focusInput()
+    setSelectedOptionId(id)
+    setInputValue(getOptionById(id).label)
+    setIsShowingOptions(false)
+    setAnnouncement(`${getOptionById(id).label} selected.`)
+  }
 
-    renderLabel(text, variant) {
+  const renderLabel = (text, variant) => {
+    return (
+      <span>
+        <Badge
+          type="notification"
+          variant={variant}
+          standalone
+          margin="0 x-small xxx-small 0"
+        />
+        {text}
+      </span>
+    )
+  }
+
+  const renderGroup = () => {
+    return Object.keys(options).map((key, index) => {
+      const badgeVariant = key === 'Eastern' ? 'success' : 'primary'
       return (
-        <span>
+        <Select.Group
+          key={index}
+          renderLabel={renderLabel(key, badgeVariant)}
+        >
+          {options[key].map((option) => (
+            <Select.Option
+              key={option.id}
+              id={option.id}
+              isHighlighted={option.id === highlightedOptionId}
+              isSelected={option.id === selectedOptionId}
+            >
+              {option.label}
+            </Select.Option>
+          ))}
+        </Select.Group>
+      )
+    })
+  }
+
+  return (
+    <div>
+      <Select
+        renderLabel="Group Select"
+        assistiveText="Type or use arrow keys to navigate options."
+        inputValue={inputValue}
+        isShowingOptions={isShowingOptions}
+        onBlur={handleBlur}
+        onRequestShowOptions={handleShowOptions}
+        onRequestHideOptions={handleHideOptions}
+        onRequestHighlightOption={handleHighlightOption}
+        onRequestSelectOption={handleSelectOption}
+        renderBeforeInput={
           <Badge
             type="notification"
-            variant={variant}
+            variant={
+              getOptionById(selectedOptionId)?.group === 'Eastern'
+                ? 'success'
+                : 'primary'
+            }
             standalone
-            margin="0 x-small xxx-small 0"
+            margin="0 0 xxx-small 0"
           />
-          {text}
-        </span>
-      )
-    }
+        }
+        inputRef={(el) => {
+          inputRef.current = el
+        }}
+      >
+        {renderGroup()}
+      </Select>
+    </div>
+  )
+}
+
+render(
+  <View>
+    <GroupSelectExample
+      options={{
+        Western: [
+          { id: 'opt5', label: 'Alaska' },
+          { id: 'opt6', label: 'California' },
+          { id: 'opt7', label: 'Colorado' },
+          { id: 'opt8', label: 'Idaho' }
+        ],
+        Eastern: [
+          { id: 'opt1', label: 'Alabama' },
+          { id: 'opt2', label: 'Connecticut' },
+          { id: 'opt3', label: 'Delaware' },
+          { id: 'opt4', label: 'Illinois' }
+        ]
+      }}
+    />
+  </View>
+)
+```
 
-    renderGroup() {
-      const { options } = this.props
-      const { highlightedOptionId, selectedOptionId } = this.state
-
-      return Object.keys(options).map((key, index) => {
-        const badgeVariant = key === 'Eastern' ? 'success' : 'primary'
-        return (
-          <Select.Group
-            key={index}
-            renderLabel={this.renderLabel(key, badgeVariant)}
-          >
-            {options[key].map((option) => (
-              <Select.Option
-                key={option.id}
-                id={option.id}
-                isHighlighted={option.id === highlightedOptionId}
-                isSelected={option.id === selectedOptionId}
-              >
-                {option.label}
-              </Select.Option>
-            ))}
-          </Select.Group>
-        )
-      })
-    }
+##### Using groups with autocomplete on Safari
 
-    render() {
-      const {
-        inputValue,
-        isShowingOptions,
-        highlightedOptionId,
-        selectedOptionId,
-        filteredOptions,
-        announcement
-      } = this.state
+Due to a WebKit bug if you are using `Select.Group` with autocomplete, the screenreader won't announce highlight/selection changes. This only seems to be an issue in Safari. Here is an example how you can work around that:
 
-      return (
-        <div>
-          <Select
-            renderLabel="Group Select"
-            assistiveText="Type or use arrow keys to navigate options."
-            inputValue={inputValue}
-            isShowingOptions={isShowingOptions}
-            onBlur={this.handleBlur}
-            onRequestShowOptions={this.handleShowOptions}
-            onRequestHideOptions={this.handleHideOptions}
-            onRequestHighlightOption={this.handleHighlightOption}
-            onRequestSelectOption={this.handleSelectOption}
-            renderBeforeInput={
-              <Badge
-                type="notification"
-                variant={
-                  this.getOptionById(selectedOptionId)?.group === 'Eastern'
-                    ? 'success'
-                    : 'primary'
-                }
-                standalone
-                margin="0 0 xxx-small 0"
-              />
-            }
-            inputRef={(el) => {
-              this.inputElement = el
-            }}
-          >
-            {this.renderGroup()}
-          </Select>
-        </div>
-      )
+```js
+---
+type: example
+---
+const GroupSelectAutocompleteExample = ({ options }) => {
+  const [inputValue, setInputValue] = useState('')
+  const [isShowingOptions, setIsShowingOptions] = useState(false)
+  const [highlightedOptionId, setHighlightedOptionId] = useState(null)
+  const [selectedOptionId, setSelectedOptionId] = useState(null)
+  const [filteredOptions, setFilteredOptions] = useState(options)
+  const [announcement, setAnnouncement] = useState(null)
+  const inputRef = useRef()
+
+  const focusInput = () => {
+    if (inputRef.current) {
+      inputRef.current.blur()
+      inputRef.current.focus()
     }
   }
 
-  render(
-    <View>
-      <GroupSelectExample
-        options={{
-          Western: [
-            { id: 'opt5', label: 'Alaska' },
-            { id: 'opt6', label: 'California' },
-            { id: 'opt7', label: 'Colorado' },
-            { id: 'opt8', label: 'Idaho' }
-          ],
-          Eastern: [
-            { id: 'opt1', label: 'Alabama' },
-            { id: 'opt2', label: 'Connecticut' },
-            { id: 'opt3', label: 'Delaware' },
-            { id: 'opt4', label: 'Illinois' }
-          ]
-        }}
-      />
-    </View>
-  )
-  ```
+  const getOptionById = (id) => {
+    return Object.values(options)
+      .flat()
+      .find((o) => o?.id === id)
+  }
 
-- ```js
-  const GroupSelectExample = ({ options }) => {
-    const [inputValue, setInputValue] = useState(options['Western'][0].label)
-    const [isShowingOptions, setIsShowingOptions] = useState(false)
-    const [highlightedOptionId, setHighlightedOptionId] = useState(null)
-    const [selectedOptionId, setSelectedOptionId] = useState(
-      options['Western'][0].id
-    )
-    const [announcement, setAnnouncement] = useState(null)
-    const inputRef = useRef()
+  const filterOptions = (value, options) => {
+    const filteredOptions = {}
+    Object.keys(options).forEach((key) => {
+      filteredOptions[key] = options[key]?.filter((option) =>
+        option.label.toLowerCase().includes(value.toLowerCase())
+      )
+    })
+    const optionsWithoutEmptyKeys = Object.keys(filteredOptions)
+      .filter((k) => filteredOptions[k].length > 0)
+      .reduce((a, k) => ({ ...a, [k]: filteredOptions[k] }), {})
+    return optionsWithoutEmptyKeys
+  }
 
-    const focusInput = () => {
-      if (inputRef.current) {
-        inputRef.current.blur()
-        inputRef.current.focus()
-      }
-    }
+  const handleShowOptions = (event) => {
+    setIsShowingOptions(true)
+    setHighlightedOptionId(null)
 
-    const getOptionById = (id) => {
-      let match = null
-      Object.keys(options).forEach((key, index) => {
-        for (let i = 0; i < options[key].length; i++) {
-          const option = options[key][i]
-          if (id === option.id) {
-            // return group property with the object just to make it easier
-            // to check which group the option belongs to
-            match = { ...option, group: key }
-            break
-          }
-        }
-      })
-      return match
-    }
+    if (inputValue || selectedOptionId || options.length === 0) return
 
-    const getGroupChangedMessage = (newOption) => {
-      const currentOption = getOptionById(highlightedOptionId)
-      const isNewGroup =
-        !currentOption || currentOption.group !== newOption.group
-      let message = isNewGroup ? `Group ${newOption.group} entered. ` : ''
-      message += newOption.label
-      return message
+    switch (event.key) {
+      case 'ArrowDown':
+        return handleHighlightOption(event, {
+          id: options[Object.keys(options)[0]][0].id
+        })
+      case 'ArrowUp':
+        return handleHighlightOption(event, {
+          id: Object.values(options).at(-1)?.at(-1)?.id
+        })
     }
+  }
 
-    const handleShowOptions = (event) => {
-      setIsShowingOptions(true)
-      setHighlightedOptionId(null)
-      if (inputValue || selectedOptionId || options.length === 0) return
-
-      switch (event.key) {
-        case 'ArrowDown':
-          return handleHighlightOption(event, {
-            id: options[Object.keys(options)[0]][0].id
-          })
-        case 'ArrowUp':
-          return handleHighlightOption(event, {
-            id: Object.values(options).at(-1)?.at(-1)?.id
-          })
-      }
-    }
+  const handleHideOptions = (event) => {
+    setIsShowingOptions(false)
+    setHighlightedOptionId(null)
+  }
 
-    const handleHideOptions = (event) => {
-      setIsShowingOptions(false)
-      setHighlightedOptionId(null)
-      setInputValue(getOptionById(selectedOptionId)?.label)
-    }
+  const handleBlur = (event) => {
+    setHighlightedOptionId(null)
+  }
 
-    const handleBlur = (event) => {
-      setHighlightedOptionId(null)
-    }
+  const handleHighlightOption = (event, { id }) => {
+    event.persist()
+    const option = getOptionById(id)
+    setTimeout(() => {
+      setAnnouncement(option.label)
+    }, 0)
+    setHighlightedOptionId(id)
+  }
 
-    const handleHighlightOption = (event, { id }) => {
-      event.persist()
-      const newOption = getOptionById(id)
-      setHighlightedOptionId(id)
-      setInputValue(inputValue)
-      setAnnouncement(getGroupChangedMessage(newOption))
-    }
+  const handleSelectOption = (event, { id }) => {
+    const option = getOptionById(id)
+    if (!option) return // prevent selecting of empty option
+    focusInput()
+    setSelectedOptionId(id)
+    setInputValue(option.label)
+    setIsShowingOptions(false)
+    setFilteredOptions(options)
+    setAnnouncement(option.label)
+  }
 
-    const handleSelectOption = (event, { id }) => {
-      focusInput()
-      setSelectedOptionId(id)
-      setInputValue(getOptionById(id).label)
-      setIsShowingOptions(false)
-      setAnnouncement(`${getOptionById(id).label} selected.`)
-    }
+  const handleInputChange = (event) => {
+    const value = event.target.value
+    const newOptions = filterOptions(value, options)
+    setInputValue(value)
+    setFilteredOptions(newOptions)
+    setHighlightedOptionId(newOptions.length > 0 ? newOptions[0].id : null)
+    setIsShowingOptions(true)
+    setSelectedOptionId(value === '' ? null : selectedOptionId)
+  }
 
-    const renderLabel = (text, variant) => {
+  const renderGroup = () => {
+    return Object.keys(filteredOptions).map((key, index) => {
       return (
-        <span>
-          <Badge
-            type="notification"
-            variant={variant}
-            standalone
-            margin="0 x-small xxx-small 0"
-          />
-          {text}
-        </span>
+        <Select.Group key={index} renderLabel={key}>
+          {filteredOptions[key].map((option) => (
+            <Select.Option
+              key={option.id}
+              id={option.id}
+              isHighlighted={option.id === highlightedOptionId}
+              isSelected={option.id === selectedOptionId}
+            >
+              {option.label}
+            </Select.Option>
+          ))}
+        </Select.Group>
       )
-    }
-
-    const renderGroup = () => {
-      return Object.keys(options).map((key, index) => {
-        const badgeVariant = key === 'Eastern' ? 'success' : 'primary'
-        return (
-          <Select.Group
-            key={index}
-            renderLabel={renderLabel(key, badgeVariant)}
-          >
-            {options[key].map((option) => (
-              <Select.Option
-                key={option.id}
-                id={option.id}
-                isHighlighted={option.id === highlightedOptionId}
-                isSelected={option.id === selectedOptionId}
-              >
-                {option.label}
-              </Select.Option>
-            ))}
-          </Select.Group>
-        )
-      })
-    }
+    })
+  }
 
+  const renderScreenReaderHelper = () => {
     return (
-      <div>
-        <Select
-          renderLabel="Group Select"
-          assistiveText="Type or use arrow keys to navigate options."
-          inputValue={inputValue}
-          isShowingOptions={isShowingOptions}
-          onBlur={handleBlur}
-          onRequestShowOptions={handleShowOptions}
-          onRequestHideOptions={handleHideOptions}
-          onRequestHighlightOption={handleHighlightOption}
-          onRequestSelectOption={handleSelectOption}
-          renderBeforeInput={
-            <Badge
-              type="notification"
-              variant={
-                getOptionById(selectedOptionId)?.group === 'Eastern'
-                  ? 'success'
-                  : 'primary'
-              }
-              standalone
-              margin="0 0 xxx-small 0"
-            />
-          }
-          inputRef={(el) => {
-            inputRef.current = el
-          }}
-        >
-          {renderGroup()}
-        </Select>
-      </div>
+      window.safari && (
+        <ScreenReaderContent>
+          <span role="alert" aria-live="assertive">
+            {announcement}
+          </span>
+        </ScreenReaderContent>
+      )
     )
   }
 
-  render(
-    <View>
-      <GroupSelectExample
-        options={{
-          Western: [
-            { id: 'opt5', label: 'Alaska' },
-            { id: 'opt6', label: 'California' },
-            { id: 'opt7', label: 'Colorado' },
-            { id: 'opt8', label: 'Idaho' }
-          ],
-          Eastern: [
-            { id: 'opt1', label: 'Alabama' },
-            { id: 'opt2', label: 'Connecticut' },
-            { id: 'opt3', label: 'Delaware' },
-            { id: 'opt4', label: 'Illinois' }
-          ]
+  return (
+    <div>
+      <Select
+        placeholder="Start typing to search..."
+        renderLabel="Group Select with autocomplete"
+        assistiveText="Type or use arrow keys to navigate options."
+        inputValue={inputValue}
+        isShowingOptions={isShowingOptions}
+        onBlur={handleBlur}
+        onInputChange={handleInputChange}
+        onRequestShowOptions={handleShowOptions}
+        onRequestHideOptions={handleHideOptions}
+        onRequestHighlightOption={handleHighlightOption}
+        onRequestSelectOption={handleSelectOption}
+        inputRef={(el) => {
+          inputRef.current = el
         }}
-      />
-    </View>
+      >
+        {renderGroup()}
+      </Select>
+      {renderScreenReaderHelper()}
+    </div>
   )
-  ```
+}
+
+render(
+  <View>
+    <GroupSelectAutocompleteExample
+      options={{
+        Western: [
+          { id: 'opt5', label: 'Alaska' },
+          { id: 'opt6', label: 'California' },
+          { id: 'opt7', label: 'Colorado' },
+          { id: 'opt8', label: 'Idaho' }
+        ],
+        Eastern: [
+          { id: 'opt1', label: 'Alabama' },
+          { id: 'opt2', label: 'Connecticut' },
+          { id: 'opt3', label: 'Delaware' },
+          { id: '4', label: 'Illinois' }
+        ]
+      }}
+    />
+  </View>
+)
+```
 
-##### Using groups with autocomplete on Safari
+#### Asynchronous option loading
 
-Due to a WebKit bug if you are using `Select.Group` with autocomplete, the screenreader won't announce highlight/selection changes. This only seems to be an issue in Safari. Here is an example how you can work around that:
+If no results match the user's search, it's recommended to leave `isShowingOptions` as `true` and to display an "empty option" as a way of communicating that there are no matches. Similarly, it's helpful to display a [Spinner](#Spinner) in an empty option while options load.
 
-- ```javascript
-  class GroupSelectAutocompleteExample extends React.Component {
-    state = {
-      inputValue: '',
-      isShowingOptions: false,
-      highlightedOptionId: null,
-      selectedOptionId: null,
-      filteredOptions: this.props.options,
-      announcement: null
+```js
+---
+type: example
+---
+const AsyncExample = ({ options }) => {
+  const [inputValue, setInputValue] = useState('')
+  const [isShowingOptions, setIsShowingOptions] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [highlightedOptionId, setHighlightedOptionId] = useState(null)
+  const [selectedOptionId, setSelectedOptionId] = useState(null)
+  const [selectedOptionLabel, setSelectedOptionLabel] = useState('')
+  const [filteredOptions, setFilteredOptions] = useState([])
+  const [announcement, setAnnouncement] = useState(null)
+  const inputRef = useRef()
+
+  const focusInput = () => {
+    if (inputRef.current) {
+      inputRef.current.blur()
+      inputRef.current.focus()
     }
+  }
+
+  let timeoutId = null
+
+  const getOptionById = (queryId) => {
+    return filteredOptions.find(({ id }) => id === queryId)
+  }
 
-    inputElement = null
+  const filterOptions = (value) => {
+    return options.filter((option) =>
+      option.label.toLowerCase().startsWith(value.toLowerCase())
+    )
+  }
 
-    focusInput = () => {
-      if (this.inputElement) {
-        this.inputElement.blur()
-        this.inputElement.focus()
+  const matchValue = () => {
+    // an option matching user input exists
+    if (filteredOptions.length === 1) {
+      const onlyOption = filteredOptions[0]
+      // automatically select the matching option
+      if (onlyOption.label.toLowerCase() === inputValue.toLowerCase()) {
+        setInputValue(onlyOption.label)
+        setSelectedOptionId(onlyOption.id)
+        return
       }
     }
-
-    getOptionById(id) {
-      const options = this.props.options
-      return Object.values(options)
-        .flat()
-        .find((o) => o?.id === id)
+    // allow user to return to empty input and no selection
+    if (inputValue.length === 0) {
+      setSelectedOptionId(null)
+      setFilteredOptions([])
+      return
     }
-
-    filterOptions(value, options) {
-      const filteredOptions = {}
-      Object.keys(options).forEach((key) => {
-        filteredOptions[key] = options[key]?.filter((option) =>
-          option.label.toLowerCase().includes(value.toLowerCase())
-        )
-      })
-      const optionsWithoutEmptyKeys = Object.keys(filteredOptions)
-        .filter((k) => filteredOptions[k].length > 0)
-        .reduce((a, k) => ({ ...a, [k]: filteredOptions[k] }), {})
-      return optionsWithoutEmptyKeys
+    // no match found, return selected option label to input
+    if (selectedOptionId) {
+      setInputValue(selectedOptionLabel)
+      return
     }
+  }
 
-    handleShowOptions = (event) => {
-      const { options } = this.props
-      const { inputValue, selectedOptionId } = this.state
+  const handleShowOptions = (event) => {
+    setIsShowingOptions(true)
+  }
 
-      this.setState({
-        isShowingOptions: true,
-        highlightedOptionId: null
-      })
+  const handleHideOptions = (event) => {
+    setIsShowingOptions(false)
+    setHighlightedOptionId(null)
+    setAnnouncement('List collapsed.')
+    matchValue()
+  }
 
-      if (inputValue || selectedOptionId || options.length === 0) return
+  const handleBlur = (event) => {
+    setHighlightedOptionId(null)
+  }
 
-      switch (event.key) {
-        case 'ArrowDown':
-          return this.handleHighlightOption(event, {
-            id: options[Object.keys(options)[0]][0].id
-          })
-        case 'ArrowUp':
-          return this.handleHighlightOption(event, {
-            id: Object.values(options).at(-1)?.at(-1)?.id
-          })
-      }
-    }
+  const handleHighlightOption = (event, { id }) => {
+    event.persist()
+    const option = getOptionById(id)
+    if (!option) return // prevent highlighting of empty option
 
-    handleHideOptions = (event) => {
-      const { selectedOptionId } = this.state
-      this.setState({
-        isShowingOptions: false,
-        highlightedOptionId: null
-      })
-    }
+    setHighlightedOptionId(id)
+    setInputValue(inputValue)
+    setAnnouncement(option.label)
+  }
 
-    handleBlur = (event) => {
-      this.setState({
-        highlightedOptionId: null
-      })
-    }
+  const handleSelectOption = (event, { id }) => {
+    const option = getOptionById(id)
+    if (!option) return // prevent selecting of empty option
+    focusInput()
+    setSelectedOptionId(id)
+    setSelectedOptionLabel(option.label)
+    setInputValue(option.label)
+    setIsShowingOptions(false)
+    setAnnouncement(`${option.label} selected. List collapsed.`)
+    setFilteredOptions([getOptionById(id)])
+  }
 
-    handleHighlightOption = (event, { id }) => {
-      event.persist()
-      const option = this.getOptionById(id)
-      setTimeout(() => {
-        this.setState((state) => ({
-          announcement: option.label
-        }))
-      }, 0)
-      this.setState((state) => ({
-        highlightedOptionId: id
-      }))
-    }
+  const handleInputChange = (event) => {
+    const value = event.target.value
+    clearTimeout(timeoutId)
 
-    handleSelectOption = (event, { id }) => {
-      const option = this.getOptionById(id)
-      if (!option) return // prevent selecting of empty option
-      this.focusInput()
-      this.setState({
-        selectedOptionId: id,
-        inputValue: option.label,
-        isShowingOptions: false,
-        filteredOptions: this.props.options,
-        announcement: option.label
-      })
-    }
+    if (!value || value === '') {
+      setIsLoading(false)
+      setInputValue(value)
+      setIsShowingOptions(true)
+      setSelectedOptionId(null)
+      setSelectedOptionLabel(null)
+      setFilteredOptions([])
+    } else {
+      setIsLoading(true)
+      setInputValue(value)
+      setIsShowingOptions(true)
+      setFilteredOptions([])
+      setHighlightedOptionId(null)
+      setAnnouncement('Loading options.')
 
-    handleInputChange = (event) => {
-      const value = event.target.value
-      const newOptions = this.filterOptions(value, this.props.options)
-      this.setState((state) => ({
-        inputValue: value,
-        filteredOptions: newOptions,
-        highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : null,
-        isShowingOptions: true,
-        selectedOptionId: value === '' ? null : state.selectedOptionId
-      }))
+      timeoutId = setTimeout(() => {
+        const newOptions = filterOptions(value)
+        setFilteredOptions(newOptions)
+        setIsLoading(false)
+        setAnnouncement(`${newOptions.length} options available.`)
+      }, 1500)
     }
+  }
 
-    renderGroup() {
-      const filteredOptions = this.state.filteredOptions
-      const { highlightedOptionId, selectedOptionId } = this.state
-
-      return Object.keys(filteredOptions).map((key, index) => {
-        return (
-          <Select.Group key={index} renderLabel={key}>
-            {filteredOptions[key].map((option) => (
+  return (
+    <div>
+      <Select
+        renderLabel="Async Select"
+        assistiveText="Type to search"
+        inputValue={inputValue}
+        isShowingOptions={isShowingOptions}
+        onBlur={handleBlur}
+        onInputChange={handleInputChange}
+        onRequestShowOptions={handleShowOptions}
+        onRequestHideOptions={handleHideOptions}
+        onRequestHighlightOption={handleHighlightOption}
+        onRequestSelectOption={handleSelectOption}
+        inputRef={(el) => {
+          inputRef.current = el
+        }}
+      >
+        {filteredOptions.length > 0 ? (
+          filteredOptions.map((option) => {
+            return (
               <Select.Option
-                key={option.id}
                 id={option.id}
+                key={option.id}
                 isHighlighted={option.id === highlightedOptionId}
                 isSelected={option.id === selectedOptionId}
+                isDisabled={option.disabled}
+                renderBeforeLabel={
+                  !option.disabled ? IconUserSolid : IconUserLine
+                }
               >
                 {option.label}
               </Select.Option>
-            ))}
-          </Select.Group>
-        )
-      })
-    }
+            )
+          })
+        ) : (
+          <Select.Option id="empty-option" key="empty-option">
+            {isLoading ? (
+              <Spinner renderTitle="Loading" size="x-small" />
+            ) : inputValue !== '' ? (
+              'No results'
+            ) : (
+              'Type to search'
+            )}
+          </Select.Option>
+        )}
+      </Select>
+    </div>
+  )
+}
+
+render(
+  <View>
+    <AsyncExample
+      options={[
+        { id: 'opt0', label: 'Aaron Aaronson' },
+        { id: 'opt1', label: 'Amber Murphy' },
+        { id: 'opt2', label: 'Andrew Miller' },
+        { id: 'opt3', label: 'Barbara Ward' },
+        { id: 'opt4', label: 'Byron Cranston', disabled: true },
+        { id: 'opt5', label: 'Dennis Reynolds' },
+        { id: 'opt6', label: 'Dee Reynolds' },
+        { id: 'opt7', label: 'Ezra Betterthan' },
+        { id: 'opt8', label: 'Jeff Spicoli' },
+        { id: 'opt9', label: 'Joseph Smith' },
+        { id: 'opt10', label: 'Jasmine Diaz' },
+        { id: 'opt11', label: 'Martin Harris' },
+        { id: 'opt12', label: 'Michael Morgan', disabled: true },
+        { id: 'opt13', label: 'Michelle Rodriguez' },
+        { id: 'opt14', label: 'Ziggy Stardust' }
+      ]}
+    />
+  </View>
+)
+```
 
-    renderScreenReaderHelper() {
-      const announcement = this.state.announcement
-      return (
-        window.safari && (
-          <ScreenReaderContent>
-            <span role="alert" aria-live="assertive">
-              {announcement}
-            </span>
-          </ScreenReaderContent>
-        )
-      )
-    }
+### Icons
 
-    render() {
-      const {
-        inputValue,
-        isShowingOptions,
-        highlightedOptionId,
-        selectedOptionId,
-        filteredOptions
-      } = this.state
+To display icons (or other elements) before or after an option, pass it via the `renderBeforeLabel` and `renderAfterLabel` prop to `Select.Option`. You can pass a function as well, which will have a `props` parameter, so you can access the properties of that `Select.Option` (e.g. if it is currently `isHighlighted`). The available props are: `[ id, isDisabled, isSelected, isHighlighted, children ]`.
 
-      return (
-        <div>
-          <Select
-            placeholder="Start typing to search..."
-            renderLabel="Group Select with autocomplete"
-            assistiveText="Type or use arrow keys to navigate options."
-            inputValue={inputValue}
-            isShowingOptions={isShowingOptions}
-            onBlur={this.handleBlur}
-            onInputChange={this.handleInputChange}
-            onRequestShowOptions={this.handleShowOptions}
-            onRequestHideOptions={this.handleHideOptions}
-            onRequestHighlightOption={this.handleHighlightOption}
-            onRequestSelectOption={this.handleSelectOption}
-            inputRef={(el) => {
-              this.inputElement = el
-            }}
-          >
-            {this.renderGroup()}
-          </Select>
-          {this.renderScreenReaderHelper()}
-        </div>
-      )
+```js
+---
+type: example
+---
+const SingleSelectExample = ({ options }) => {
+  const [inputValue, setInputValue] = useState(options[0].label)
+  const [isShowingOptions, setIsShowingOptions] = useState(false)
+  const [highlightedOptionId, setHighlightedOptionId] = useState(null)
+  const [selectedOptionId, setSelectedOptionId] = useState(options[0].id)
+  const [announcement, setAnnouncement] = useState(null)
+  const inputRef = useRef()
+
+  const focusInput = () => {
+    if (inputRef.current) {
+      inputRef.current.blur()
+      inputRef.current.focus()
     }
   }
 
-  render(
-    <View>
-      <GroupSelectAutocompleteExample
-        options={{
-          Western: [
-            { id: 'opt5', label: 'Alaska' },
-            { id: 'opt6', label: 'California' },
-            { id: 'opt7', label: 'Colorado' },
-            { id: 'opt8', label: 'Idaho' }
-          ],
-          Eastern: [
-            { id: 'opt1', label: 'Alabama' },
-            { id: 'opt2', label: 'Connecticut' },
-            { id: 'opt3', label: 'Delaware' },
-            { id: '4', label: 'Illinois' }
-          ]
-        }}
-      />
-    </View>
-  )
-  ```
-
-- ```js
-  const GroupSelectAutocompleteExample = ({ options }) => {
-    const [inputValue, setInputValue] = useState('')
-    const [isShowingOptions, setIsShowingOptions] = useState(false)
-    const [highlightedOptionId, setHighlightedOptionId] = useState(null)
-    const [selectedOptionId, setSelectedOptionId] = useState(null)
-    const [filteredOptions, setFilteredOptions] = useState(options)
-    const [announcement, setAnnouncement] = useState(null)
-    const inputRef = useRef()
+  const getOptionById = (queryId) => {
+    return options.find(({ id }) => id === queryId)
+  }
 
-    const focusInput = () => {
-      if (inputRef.current) {
-        inputRef.current.blur()
-        inputRef.current.focus()
-      }
-    }
+  const handleShowOptions = (event) => {
+    setIsShowingOptions(true)
 
-    const getOptionById = (id) => {
-      return Object.values(options)
-        .flat()
-        .find((o) => o?.id === id)
-    }
+    if (inputValue || selectedOptionId || options.length === 0) return
 
-    const filterOptions = (value, options) => {
-      const filteredOptions = {}
-      Object.keys(options).forEach((key) => {
-        filteredOptions[key] = options[key]?.filter((option) =>
-          option.label.toLowerCase().includes(value.toLowerCase())
-        )
-      })
-      const optionsWithoutEmptyKeys = Object.keys(filteredOptions)
-        .filter((k) => filteredOptions[k].length > 0)
-        .reduce((a, k) => ({ ...a, [k]: filteredOptions[k] }), {})
-      return optionsWithoutEmptyKeys
+    switch (event.key) {
+      case 'ArrowDown':
+        return handleHighlightOption(event, { id: options[0].id })
+      case 'ArrowUp':
+        return handleHighlightOption(event, {
+          id: options[options.length - 1].id
+        })
     }
+  }
 
-    const handleShowOptions = (event) => {
-      setIsShowingOptions(true)
-      setHighlightedOptionId(null)
-
-      if (inputValue || selectedOptionId || options.length === 0) return
-
-      switch (event.key) {
-        case 'ArrowDown':
-          return handleHighlightOption(event, {
-            id: options[Object.keys(options)[0]][0].id
-          })
-        case 'ArrowUp':
-          return handleHighlightOption(event, {
-            id: Object.values(options).at(-1)?.at(-1)?.id
-          })
-      }
-    }
+  const handleHideOptions = (event) => {
+    const option = getOptionById(selectedOptionId)?.label
+    setIsShowingOptions(false)
+    setHighlightedOptionId(null)
+    setInputValue(selectedOptionId ? option : '')
+    setAnnouncement('List collapsed.')
+  }
 
-    const handleHideOptions = (event) => {
-      setIsShowingOptions(false)
-      setHighlightedOptionId(null)
-    }
+  const handleBlur = (event) => {
+    setHighlightedOptionId(null)
+  }
 
-    const handleBlur = (event) => {
-      setHighlightedOptionId(null)
-    }
+  const handleHighlightOption = (event, { id }) => {
+    event.persist()
+    const optionsAvailable = `${options.length} options available.`
+    const nowOpen = !isShowingOptions
+      ? `List expanded. ${optionsAvailable}`
+      : ''
+    const option = getOptionById(id).label
+    setHighlightedOptionId(id)
+    setInputValue(inputValue)
+    setAnnouncement(`${option} ${nowOpen}`)
+  }
 
-    const handleHighlightOption = (event, { id }) => {
-      event.persist()
-      const option = getOptionById(id)
-      setTimeout(() => {
-        setAnnouncement(option.label)
-      }, 0)
-      setHighlightedOptionId(id)
-    }
+  const handleSelectOption = (event, { id }) => {
+    const option = getOptionById(id).label
+    focusInput()
+    setSelectedOptionId(id)
+    setInputValue(option)
+    setIsShowingOptions(false)
+    setAnnouncement(`"${option}" selected. List collapsed.`)
+  }
 
-    const handleSelectOption = (event, { id }) => {
-      const option = getOptionById(id)
-      if (!option) return // prevent selecting of empty option
-      focusInput()
-      setSelectedOptionId(id)
-      setInputValue(option.label)
-      setIsShowingOptions(false)
-      setFilteredOptions(options)
-      setAnnouncement(option.label)
-    }
+  return (
+    <div>
+      <Select
+        renderLabel="Option Icons"
+        assistiveText="Use arrow keys to navigate options."
+        inputValue={inputValue}
+        isShowingOptions={isShowingOptions}
+        onBlur={handleBlur}
+        onRequestShowOptions={handleShowOptions}
+        onRequestHideOptions={handleHideOptions}
+        onRequestHighlightOption={handleHighlightOption}
+        onRequestSelectOption={handleSelectOption}
+        inputRef={(el) => {
+          inputRef.current = el
+        }}
+      >
+        {options.map((option) => {
+          return (
+            <Select.Option
+              id={option.id}
+              key={option.id}
+              isHighlighted={option.id === highlightedOptionId}
+              isSelected={option.id === selectedOptionId}
+              renderBeforeLabel={option.renderBeforeLabel}
+            >
+              {option.label}
+            </Select.Option>
+          )
+        })}
+      </Select>
+    </div>
+  )
+}
 
-    const handleInputChange = (event) => {
-      const value = event.target.value
-      const newOptions = filterOptions(value, options)
-      setInputValue(value)
-      setFilteredOptions(newOptions)
-      setHighlightedOptionId(newOptions.length > 0 ? newOptions[0].id : null)
-      setIsShowingOptions(true)
-      setSelectedOptionId(value === '' ? null : selectedOptionId)
-    }
-
-    const renderGroup = () => {
-      return Object.keys(filteredOptions).map((key, index) => {
-        return (
-          <Select.Group key={index} renderLabel={key}>
-            {filteredOptions[key].map((option) => (
-              <Select.Option
-                key={option.id}
-                id={option.id}
-                isHighlighted={option.id === highlightedOptionId}
-                isSelected={option.id === selectedOptionId}
-              >
-                {option.label}
-              </Select.Option>
-            ))}
-          </Select.Group>
-        )
-      })
-    }
-
-    const renderScreenReaderHelper = () => {
-      return (
-        window.safari && (
-          <ScreenReaderContent>
-            <span role="alert" aria-live="assertive">
-              {announcement}
-            </span>
-          </ScreenReaderContent>
-        )
-      )
-    }
-
-    return (
-      <div>
-        <Select
-          placeholder="Start typing to search..."
-          renderLabel="Group Select with autocomplete"
-          assistiveText="Type or use arrow keys to navigate options."
-          inputValue={inputValue}
-          isShowingOptions={isShowingOptions}
-          onBlur={handleBlur}
-          onInputChange={handleInputChange}
-          onRequestShowOptions={handleShowOptions}
-          onRequestHideOptions={handleHideOptions}
-          onRequestHighlightOption={handleHighlightOption}
-          onRequestSelectOption={handleSelectOption}
-          inputRef={(el) => {
-            inputRef.current = el
-          }}
-        >
-          {renderGroup()}
-        </Select>
-        {renderScreenReaderHelper()}
-      </div>
-    )
-  }
-
-  render(
-    <View>
-      <GroupSelectAutocompleteExample
-        options={{
-          Western: [
-            { id: 'opt5', label: 'Alaska' },
-            { id: 'opt6', label: 'California' },
-            { id: 'opt7', label: 'Colorado' },
-            { id: 'opt8', label: 'Idaho' }
-          ],
-          Eastern: [
-            { id: 'opt1', label: 'Alabama' },
-            { id: 'opt2', label: 'Connecticut' },
-            { id: 'opt3', label: 'Delaware' },
-            { id: '4', label: 'Illinois' }
-          ]
-        }}
-      />
-    </View>
-  )
-  ```
-
-#### Asynchronous option loading
-
-If no results match the user's search, it's recommended to leave `isShowingOptions` as `true` and to display an "empty option" as a way of communicating that there are no matches. Similarly, it's helpful to display a [Spinner](#Spinner) in an empty option while options load.
-
-- ```javascript
-  class AsyncExample extends React.Component {
-    state = {
-      inputValue: '',
-      isShowingOptions: false,
-      isLoading: false,
-      highlightedOptionId: null,
-      selectedOptionId: null,
-      selectedOptionLabel: '',
-      filteredOptions: [],
-      announcement: null
-    }
-
-    inputElement = null
-
-    focusInput = () => {
-      if (this.inputElement) {
-        this.inputElement.blur()
-        this.inputElement.focus()
-      }
-    }
-
-    timeoutId = null
-
-    getOptionById(queryId) {
-      return this.state.filteredOptions.find(({ id }) => id === queryId)
-    }
-
-    filterOptions = (value) => {
-      return this.props.options.filter((option) =>
-        option.label.toLowerCase().startsWith(value.toLowerCase())
-      )
-    }
-
-    matchValue() {
-      const {
-        filteredOptions,
-        inputValue,
-        selectedOptionId,
-        selectedOptionLabel
-      } = this.state
-
-      // an option matching user input exists
-      if (filteredOptions.length === 1) {
-        const onlyOption = filteredOptions[0]
-        // automatically select the matching option
-        if (onlyOption.label.toLowerCase() === inputValue.toLowerCase()) {
-          return {
-            inputValue: onlyOption.label,
-            selectedOptionId: onlyOption.id
+render(
+  <View>
+    <SingleSelectExample
+      options={[
+        {
+          id: 'opt1',
+          label: 'Text',
+          renderBeforeLabel: 'XY'
+        },
+        {
+          id: 'opt2',
+          label: 'Icon',
+          renderBeforeLabel: <IconCheckSolid />
+        },
+        {
+          id: 'opt3',
+          label: 'Colored Icon',
+          renderBeforeLabel: (props) => {
+            let color = 'brand'
+            if (props.isHighlighted) color = 'primary-inverse'
+            if (props.isSelected) color = 'primary'
+            if (props.isDisabled) color = 'warning'
+            return <IconInstructureSolid color={color} />
           }
         }
-      }
-      // allow user to return to empty input and no selection
-      if (inputValue.length === 0) {
-        return { selectedOptionId: null, filteredOptions: [] }
-      }
-      // no match found, return selected option label to input
-      if (selectedOptionId) {
-        return { inputValue: selectedOptionLabel }
-      }
-    }
-
-    handleShowOptions = (event) => {
-      this.setState(({ filteredOptions }) => ({
-        isShowingOptions: true
-      }))
-    }
-
-    handleHideOptions = (event) => {
-      const { selectedOptionId, inputValue } = this.state
-      this.setState({
-        isShowingOptions: false,
-        highlightedOptionId: null,
-        announcement: 'List collapsed.',
-        ...this.matchValue()
-      })
-    }
-
-    handleBlur = (event) => {
-      this.setState({ highlightedOptionId: null })
-    }
-
-    handleHighlightOption = (event, { id }) => {
-      event.persist()
-      const option = this.getOptionById(id)
-      if (!option) return // prevent highlighting of empty option
-      this.setState((state) => ({
-        highlightedOptionId: id,
-        inputValue: state.inputValue,
-        announcement: option.label
-      }))
-    }
-
-    handleSelectOption = (event, { id }) => {
-      const option = this.getOptionById(id)
-      if (!option) return // prevent selecting of empty option
-      this.focusInput()
-      this.setState({
-        selectedOptionId: id,
-        selectedOptionLabel: option.label,
-        inputValue: option.label,
-        isShowingOptions: false,
-        announcement: `${option.label} selected. List collapsed.`,
-        filteredOptions: [this.getOptionById(id)]
-      })
-    }
-
-    handleInputChange = (event) => {
-      const value = event.target.value
-      clearTimeout(this.timeoutId)
-
-      if (!value || value === '') {
-        this.setState({
-          isLoading: false,
-          inputValue: value,
-          isShowingOptions: true,
-          selectedOptionId: null,
-          selectedOptionLabel: null,
-          filteredOptions: []
-        })
-      } else {
-        this.setState({
-          isLoading: true,
-          inputValue: value,
-          isShowingOptions: true,
-          filteredOptions: [],
-          highlightedOptionId: null,
-          announcement: 'Loading options.'
-        })
-
-        this.timeoutId = setTimeout(() => {
-          const newOptions = this.filterOptions(value)
-          this.setState({
-            filteredOptions: newOptions,
-            isLoading: false,
-            announcement: `${newOptions.length} options available.`
-          })
-        }, 1500)
-      }
-    }
-
-    render() {
-      const {
-        inputValue,
-        isShowingOptions,
-        isLoading,
-        highlightedOptionId,
-        selectedOptionId,
-        filteredOptions,
-        announcement
-      } = this.state
-
-      return (
-        <div>
-          <Select
-            renderLabel="Async Select"
-            assistiveText="Type to search"
-            inputValue={inputValue}
-            isShowingOptions={isShowingOptions}
-            onBlur={this.handleBlur}
-            onInputChange={this.handleInputChange}
-            onRequestShowOptions={this.handleShowOptions}
-            onRequestHideOptions={this.handleHideOptions}
-            onRequestHighlightOption={this.handleHighlightOption}
-            onRequestSelectOption={this.handleSelectOption}
-            inputRef={(el) => {
-              this.inputElement = el
-            }}
-          >
-            {filteredOptions.length > 0 ? (
-              filteredOptions.map((option) => {
-                return (
-                  <Select.Option
-                    id={option.id}
-                    key={option.id}
-                    isHighlighted={option.id === highlightedOptionId}
-                    isSelected={option.id === selectedOptionId}
-                    isDisabled={option.disabled}
-                    renderBeforeLabel={
-                      !option.disabled ? IconUserSolid : IconUserLine
-                    }
-                  >
-                    {option.label}
-                  </Select.Option>
-                )
-              })
-            ) : (
-              <Select.Option id="empty-option" key="empty-option">
-                {isLoading ? (
-                  <Spinner renderTitle="Loading" size="x-small" />
-                ) : inputValue !== '' ? (
-                  'No results'
-                ) : (
-                  'Type to search'
-                )}
-              </Select.Option>
-            )}
-          </Select>
-        </div>
-      )
-    }
-  }
-
-  render(
-    <View>
-      <AsyncExample
-        options={[
-          { id: 'opt0', label: 'Aaron Aaronson' },
-          { id: 'opt1', label: 'Amber Murphy' },
-          { id: 'opt2', label: 'Andrew Miller' },
-          { id: 'opt3', label: 'Barbara Ward' },
-          { id: 'opt4', label: 'Byron Cranston', disabled: true },
-          { id: 'opt5', label: 'Dennis Reynolds' },
-          { id: 'opt6', label: 'Dee Reynolds' },
-          { id: 'opt7', label: 'Ezra Betterthan' },
-          { id: 'opt8', label: 'Jeff Spicoli' },
-          { id: 'opt9', label: 'Joseph Smith' },
-          { id: 'opt10', label: 'Jasmine Diaz' },
-          { id: 'opt11', label: 'Martin Harris' },
-          { id: 'opt12', label: 'Michael Morgan', disabled: true },
-          { id: 'opt13', label: 'Michelle Rodriguez' },
-          { id: 'opt14', label: 'Ziggy Stardust' }
-        ]}
-      />
-    </View>
-  )
-  ```
-
-- ```js
-  const AsyncExample = ({ options }) => {
-    const [inputValue, setInputValue] = useState('')
-    const [isShowingOptions, setIsShowingOptions] = useState(false)
-    const [isLoading, setIsLoading] = useState(false)
-    const [highlightedOptionId, setHighlightedOptionId] = useState(null)
-    const [selectedOptionId, setSelectedOptionId] = useState(null)
-    const [selectedOptionLabel, setSelectedOptionLabel] = useState('')
-    const [filteredOptions, setFilteredOptions] = useState([])
-    const [announcement, setAnnouncement] = useState(null)
-    const inputRef = useRef()
-
-    const focusInput = () => {
-      if (inputRef.current) {
-        inputRef.current.blur()
-        inputRef.current.focus()
-      }
-    }
-
-    let timeoutId = null
-
-    const getOptionById = (queryId) => {
-      return filteredOptions.find(({ id }) => id === queryId)
-    }
-
-    const filterOptions = (value) => {
-      return options.filter((option) =>
-        option.label.toLowerCase().startsWith(value.toLowerCase())
-      )
-    }
-
-    const matchValue = () => {
-      // an option matching user input exists
-      if (filteredOptions.length === 1) {
-        const onlyOption = filteredOptions[0]
-        // automatically select the matching option
-        if (onlyOption.label.toLowerCase() === inputValue.toLowerCase()) {
-          setInputValue(onlyOption.label)
-          setSelectedOptionId(onlyOption.id)
-          return
-        }
-      }
-      // allow user to return to empty input and no selection
-      if (inputValue.length === 0) {
-        setSelectedOptionId(null)
-        setFilteredOptions([])
-        return
-      }
-      // no match found, return selected option label to input
-      if (selectedOptionId) {
-        setInputValue(selectedOptionLabel)
-        return
-      }
-    }
-
-    const handleShowOptions = (event) => {
-      setIsShowingOptions(true)
-    }
-
-    const handleHideOptions = (event) => {
-      setIsShowingOptions(false)
-      setHighlightedOptionId(null)
-      setAnnouncement('List collapsed.')
-      matchValue()
-    }
-
-    const handleBlur = (event) => {
-      setHighlightedOptionId(null)
-    }
-
-    const handleHighlightOption = (event, { id }) => {
-      event.persist()
-      const option = getOptionById(id)
-      if (!option) return // prevent highlighting of empty option
-
-      setHighlightedOptionId(id)
-      setInputValue(inputValue)
-      setAnnouncement(option.label)
-    }
-
-    const handleSelectOption = (event, { id }) => {
-      const option = getOptionById(id)
-      if (!option) return // prevent selecting of empty option
-      focusInput()
-      setSelectedOptionId(id)
-      setSelectedOptionLabel(option.label)
-      setInputValue(option.label)
-      setIsShowingOptions(false)
-      setAnnouncement(`${option.label} selected. List collapsed.`)
-      setFilteredOptions([getOptionById(id)])
-    }
-
-    const handleInputChange = (event) => {
-      const value = event.target.value
-      clearTimeout(timeoutId)
-
-      if (!value || value === '') {
-        setIsLoading(false)
-        setInputValue(value)
-        setIsShowingOptions(true)
-        setSelectedOptionId(null)
-        setSelectedOptionLabel(null)
-        setFilteredOptions([])
-      } else {
-        setIsLoading(true)
-        setInputValue(value)
-        setIsShowingOptions(true)
-        setFilteredOptions([])
-        setHighlightedOptionId(null)
-        setAnnouncement('Loading options.')
-
-        timeoutId = setTimeout(() => {
-          const newOptions = filterOptions(value)
-          setFilteredOptions(newOptions)
-          setIsLoading(false)
-          setAnnouncement(`${newOptions.length} options available.`)
-        }, 1500)
-      }
-    }
-
-    return (
-      <div>
-        <Select
-          renderLabel="Async Select"
-          assistiveText="Type to search"
-          inputValue={inputValue}
-          isShowingOptions={isShowingOptions}
-          onBlur={handleBlur}
-          onInputChange={handleInputChange}
-          onRequestShowOptions={handleShowOptions}
-          onRequestHideOptions={handleHideOptions}
-          onRequestHighlightOption={handleHighlightOption}
-          onRequestSelectOption={handleSelectOption}
-          inputRef={(el) => {
-            inputRef.current = el
-          }}
-        >
-          {filteredOptions.length > 0 ? (
-            filteredOptions.map((option) => {
-              return (
-                <Select.Option
-                  id={option.id}
-                  key={option.id}
-                  isHighlighted={option.id === highlightedOptionId}
-                  isSelected={option.id === selectedOptionId}
-                  isDisabled={option.disabled}
-                  renderBeforeLabel={
-                    !option.disabled ? IconUserSolid : IconUserLine
-                  }
-                >
-                  {option.label}
-                </Select.Option>
-              )
-            })
-          ) : (
-            <Select.Option id="empty-option" key="empty-option">
-              {isLoading ? (
-                <Spinner renderTitle="Loading" size="x-small" />
-              ) : inputValue !== '' ? (
-                'No results'
-              ) : (
-                'Type to search'
-              )}
-            </Select.Option>
-          )}
-        </Select>
-      </div>
-    )
-  }
-
-  render(
-    <View>
-      <AsyncExample
-        options={[
-          { id: 'opt0', label: 'Aaron Aaronson' },
-          { id: 'opt1', label: 'Amber Murphy' },
-          { id: 'opt2', label: 'Andrew Miller' },
-          { id: 'opt3', label: 'Barbara Ward' },
-          { id: 'opt4', label: 'Byron Cranston', disabled: true },
-          { id: 'opt5', label: 'Dennis Reynolds' },
-          { id: 'opt6', label: 'Dee Reynolds' },
-          { id: 'opt7', label: 'Ezra Betterthan' },
-          { id: 'opt8', label: 'Jeff Spicoli' },
-          { id: 'opt9', label: 'Joseph Smith' },
-          { id: 'opt10', label: 'Jasmine Diaz' },
-          { id: 'opt11', label: 'Martin Harris' },
-          { id: 'opt12', label: 'Michael Morgan', disabled: true },
-          { id: 'opt13', label: 'Michelle Rodriguez' },
-          { id: 'opt14', label: 'Ziggy Stardust' }
-        ]}
-      />
-    </View>
-  )
-  ```
-
-### Icons
-
-To display icons (or other elements) before or after an option, pass it via the `renderBeforeLabel` and `renderAfterLabel` prop to `Select.Option`. You can pass a function as well, which will have a `props` parameter, so you can access the properties of that `Select.Option` (e.g. if it is currently `isHighlighted`). The available props are: `[ id, isDisabled, isSelected, isHighlighted, children ]`.
-
-- ```js
-  class SingleSelectExample extends React.Component {
-    state = {
-      inputValue: this.props.options[0].label,
-      isShowingOptions: false,
-      highlightedOptionId: null,
-      selectedOptionId: this.props.options[0].id,
-      announcement: null
-    }
-    inputElement = null
-
-    focusInput = () => {
-      if (this.inputElement) {
-        this.inputElement.blur()
-        this.inputElement.focus()
-      }
-    }
-
-    getOptionById(queryId) {
-      return this.props.options.find(({ id }) => id === queryId)
-    }
-
-    handleShowOptions = (event) => {
-      const { options } = this.props
-      const { inputValue, selectedOptionId } = this.state
-
-      this.setState({
-        isShowingOptions: true
-      })
-
-      if (inputValue || selectedOptionId || options.length === 0) return
-
-      switch (event.key) {
-        case 'ArrowDown':
-          return this.handleHighlightOption(event, { id: options[0].id })
-        case 'ArrowUp':
-          return this.handleHighlightOption(event, {
-            id: options[options.length - 1].id
-          })
-      }
-    }
-
-    handleHideOptions = (event) => {
-      const { selectedOptionId } = this.state
-      const option = this.getOptionById(selectedOptionId)?.label
-      this.setState({
-        isShowingOptions: false,
-        highlightedOptionId: null,
-        inputValue: selectedOptionId ? option : '',
-        announcement: 'List collapsed.'
-      })
-    }
-
-    handleBlur = (event) => {
-      this.setState({
-        highlightedOptionId: null
-      })
-    }
-
-    handleHighlightOption = (event, { id }) => {
-      event.persist()
-      const optionsAvailable = `${this.props.options.length} options available.`
-      const nowOpen = !this.state.isShowingOptions
-        ? `List expanded. ${optionsAvailable}`
-        : ''
-      const option = this.getOptionById(id).label
-      this.setState((state) => ({
-        highlightedOptionId: id,
-        inputValue: state.inputValue,
-        announcement: `${option} ${nowOpen}`
-      }))
-    }
-
-    handleSelectOption = (event, { id }) => {
-      const option = this.getOptionById(id).label
-      this.focusInput()
-      this.setState({
-        selectedOptionId: id,
-        inputValue: option,
-        isShowingOptions: false,
-        announcement: `"${option}" selected. List collapsed.`
-      })
-    }
-
-    render() {
-      const {
-        inputValue,
-        isShowingOptions,
-        highlightedOptionId,
-        selectedOptionId,
-        announcement
-      } = this.state
-
-      return (
-        <div>
-          <Select
-            renderLabel="Option Icons"
-            assistiveText="Use arrow keys to navigate options."
-            inputValue={inputValue}
-            isShowingOptions={isShowingOptions}
-            onBlur={this.handleBlur}
-            onRequestShowOptions={this.handleShowOptions}
-            onRequestHideOptions={this.handleHideOptions}
-            onRequestHighlightOption={this.handleHighlightOption}
-            onRequestSelectOption={this.handleSelectOption}
-            inputRef={(el) => {
-              this.inputElement = el
-            }}
-          >
-            {this.props.options.map((option) => {
-              return (
-                <Select.Option
-                  id={option.id}
-                  key={option.id}
-                  isHighlighted={option.id === highlightedOptionId}
-                  isSelected={option.id === selectedOptionId}
-                  renderBeforeLabel={option.renderBeforeLabel}
-                >
-                  {option.label}
-                </Select.Option>
-              )
-            })}
-          </Select>
-        </div>
-      )
-    }
-  }
-
-  render(
-    <View>
-      <SingleSelectExample
-        options={[
-          {
-            id: 'opt1',
-            label: 'Text',
-            renderBeforeLabel: 'XY'
-          },
-          {
-            id: 'opt2',
-            label: 'Icon',
-            renderBeforeLabel: <IconCheckSolid />
-          },
-          {
-            id: 'opt3',
-            label: 'Colored Icon',
-            renderBeforeLabel: (props) => {
-              let color = 'brand'
-              if (props.isHighlighted) color = 'primary-inverse'
-              if (props.isSelected) color = 'primary'
-              if (props.isDisabled) color = 'warning'
-              return <IconInstructureSolid color={color} />
-            }
-          }
-        ]}
-      />
-    </View>
-  )
-  ```
-
-- ```js
-  const SingleSelectExample = ({ options }) => {
-    const [inputValue, setInputValue] = useState(options[0].label)
-    const [isShowingOptions, setIsShowingOptions] = useState(false)
-    const [highlightedOptionId, setHighlightedOptionId] = useState(null)
-    const [selectedOptionId, setSelectedOptionId] = useState(options[0].id)
-    const [announcement, setAnnouncement] = useState(null)
-    const inputRef = useRef()
-
-    const focusInput = () => {
-      if (inputRef.current) {
-        inputRef.current.blur()
-        inputRef.current.focus()
-      }
-    }
-
-    const getOptionById = (queryId) => {
-      return options.find(({ id }) => id === queryId)
-    }
-
-    const handleShowOptions = (event) => {
-      setIsShowingOptions(true)
-
-      if (inputValue || selectedOptionId || options.length === 0) return
-
-      switch (event.key) {
-        case 'ArrowDown':
-          return handleHighlightOption(event, { id: options[0].id })
-        case 'ArrowUp':
-          return handleHighlightOption(event, {
-            id: options[options.length - 1].id
-          })
-      }
-    }
-
-    const handleHideOptions = (event) => {
-      const option = getOptionById(selectedOptionId)?.label
-      setIsShowingOptions(false)
-      setHighlightedOptionId(null)
-      setInputValue(selectedOptionId ? option : '')
-      setAnnouncement('List collapsed.')
-    }
-
-    const handleBlur = (event) => {
-      setHighlightedOptionId(null)
-    }
-
-    const handleHighlightOption = (event, { id }) => {
-      event.persist()
-      const optionsAvailable = `${options.length} options available.`
-      const nowOpen = !isShowingOptions
-        ? `List expanded. ${optionsAvailable}`
-        : ''
-      const option = getOptionById(id).label
-      setHighlightedOptionId(id)
-      setInputValue(inputValue)
-      setAnnouncement(`${option} ${nowOpen}`)
-    }
-
-    const handleSelectOption = (event, { id }) => {
-      const option = getOptionById(id).label
-      focusInput()
-      setSelectedOptionId(id)
-      setInputValue(option)
-      setIsShowingOptions(false)
-      setAnnouncement(`"${option}" selected. List collapsed.`)
-    }
-
-    return (
-      <div>
-        <Select
-          renderLabel="Option Icons"
-          assistiveText="Use arrow keys to navigate options."
-          inputValue={inputValue}
-          isShowingOptions={isShowingOptions}
-          onBlur={handleBlur}
-          onRequestShowOptions={handleShowOptions}
-          onRequestHideOptions={handleHideOptions}
-          onRequestHighlightOption={handleHighlightOption}
-          onRequestSelectOption={handleSelectOption}
-          inputRef={(el) => {
-            inputRef.current = el
-          }}
-        >
-          {options.map((option) => {
-            return (
-              <Select.Option
-                id={option.id}
-                key={option.id}
-                isHighlighted={option.id === highlightedOptionId}
-                isSelected={option.id === selectedOptionId}
-                renderBeforeLabel={option.renderBeforeLabel}
-              >
-                {option.label}
-              </Select.Option>
-            )
-          })}
-        </Select>
-      </div>
-    )
-  }
-
-  render(
-    <View>
-      <SingleSelectExample
-        options={[
-          {
-            id: 'opt1',
-            label: 'Text',
-            renderBeforeLabel: 'XY'
-          },
-          {
-            id: 'opt2',
-            label: 'Icon',
-            renderBeforeLabel: <IconCheckSolid />
-          },
-          {
-            id: 'opt3',
-            label: 'Colored Icon',
-            renderBeforeLabel: (props) => {
-              let color = 'brand'
-              if (props.isHighlighted) color = 'primary-inverse'
-              if (props.isSelected) color = 'primary'
-              if (props.isDisabled) color = 'warning'
-              return <IconInstructureSolid color={color} />
-            }
-          }
-        ]}
-      />
-    </View>
-  )
-  ```
+      ]}
+    />
+  </View>
+)
+```
 
 #### Providing assistive text for screen readers