@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.1

package/src/legacy/tool-ui/src/main/webapp/v4/ComboInput.js

@@ -0,0 +1,1491 @@
+import create from './dom/create'
+import find from './dom/find'
+import findAll from './dom/findAll'
+import ifClick from './dom/ifClick'
+import Tether from './dom/Tether'
+import Cookies from 'js.cookie'
+
+let idIndex = 0
+let current
+const tooltips = window.BRIGHTSPOT?.ui?.tooltips
+
+export default class ComboInput {
+  constructor(select, settings) {
+    this._select = select
+    this._reorderSelectOptions()
+    this._getOptionsIndex = 0
+    this._getOptionsUrl =
+      typeof settings.getOptionsUrl === 'function' && settings.getOptionsUrl
+    this._modifier = settings.modifier
+    this._duplicates = new Map()
+    this._createNewListItem = null
+    this._createNewList = null
+    this._fetchOnce = this._select.hasAttribute('data-fetch-once')
+    this._optionsLoaded = false
+
+    this._list = create('ul', {
+      id: '_cb' + idIndex++,
+      className: 'ComboInput-list',
+      'aria-label': select.getAttribute('aria-label') || undefined,
+      role: 'listbox',
+      'aria-multiselectable': select.hasAttribute('multiple') || undefined,
+
+      onclick: (e) => {
+        if (!e.target.getAttribute('data-create')) {
+          e.preventDefault()
+          e.stopPropagation()
+
+          const target = e.target.classList.contains('ComboInput-check')
+            ? e.target.parentElement
+            : e.target
+
+          if (target.classList.contains('ComboInput-option')) {
+            this.updateValue(
+              target.getAttribute('data-value'),
+              target.getAttribute('data-missing-option'),
+            )
+          }
+        }
+      },
+
+      onmouseover: (e) => {
+        const option = e.target.getAttribute('data-create')
+          ? e.target.closest('.ComboInput-option')
+          : e.target
+
+        if (option.classList.contains('ComboInput-option')) {
+          this._highlightOption(option, 0)
+        }
+      },
+    })
+
+    this._label = create('div', {
+      className: 'ComboInput-label',
+      dataset: {
+        placeholder:
+          select.getAttribute('data-placeholder') ||
+          select.getAttribute('placeholder') ||
+          '',
+      },
+    })
+
+    let searchWidgetFilter = select.closest('.SearchWidget-filter')
+    if (searchWidgetFilter) {
+      let missing = find(searchWidgetFilter, 'input[type="checkbox"]')
+      if (
+        missing &&
+        missing.closest('.SearchWidget-filter') === searchWidgetFilter
+      ) {
+        this._missing = missing
+      }
+    }
+
+    this.updateList()
+    const groups = findAll(this._list, '.ComboInput-heading')
+    for (let key = 0; key < groups.length; key++) {
+      if (groups[key].getAttribute('data-value')) {
+        this.updateSelection(groups[key])
+      }
+    }
+    this.updateLabel()
+
+    this._filter = create('input', {
+      type: 'text',
+      className: 'ComboInput-filter',
+      'aria-autocomplete': 'list',
+      'aria-controls': this._list.id,
+      placeholder: window.CONTENT_SELECT_PLACEHOLDER
+        ? window.CONTENT_SELECT_PLACEHOLDER
+        : 'Search',
+      oninput: this.filterList.bind(this),
+    })
+
+    this._container = create(
+      'div',
+      {
+        id: select.id || undefined,
+        className: 'ComboInput',
+        tabIndex: select.tabIndex || 0,
+        role: 'combobox',
+        'aria-label': select.getAttribute('aria-label') || undefined,
+        'aria-haspopup': 'listbox',
+        'aria-owns': this._list.id,
+        'aria-expanded': 'false',
+        'aria-required': select.getAttribute('aria-required') || undefined,
+
+        onclick: (e) => {
+          e.preventDefault()
+          this.toggleList()
+        },
+
+        onkeydown: (e) => {
+          // allows shiftKey + Tab events & checks for remaining keys in ifUnmodified
+          if (e.ctrlKey || e.altKey || e.metaKey) return
+          const activeOption = this._getActiveOption()
+          const isExpanded =
+            this._container.getAttribute('aria-expanded') === 'true'
+
+          switch (e.key) {
+            case 'Enter':
+              if (this._select.classList.contains('is-readOnly')) {
+                e.preventDefault()
+                e.stopPropagation()
+                return
+              }
+
+              if (!isExpanded) {
+                this.showList()
+                e.preventDefault()
+                return
+              }
+
+              if (activeOption) {
+                if (activeOption.classList.contains('nested')) {
+                  e.preventDefault()
+                  this.toggleCreateNewList()
+                  return
+                } else if (
+                  activeOption.dataset.sublist ||
+                  activeOption.dataset.create
+                ) {
+                  const createLink =
+                    activeOption.querySelector('a.objectId-create')
+
+                  if (createLink) {
+                    createLink.click()
+                    this.hideList()
+                  }
+                } else {
+                  this.updateValue(
+                    activeOption.getAttribute('data-value'),
+                    activeOption.getAttribute('data-missing-option'),
+                  )
+                  this.hideList()
+                }
+
+                if (!this._select.multiple) this._container.focus()
+              }
+
+              e.preventDefault()
+              e.stopPropagation()
+              return
+
+            case 'Escape':
+              if (this._container.matches('[aria-expanded="true"]')) {
+                this.hideList()
+                this._container.focus()
+                e.preventDefault()
+                e.stopPropagation()
+              }
+              return
+
+            case 'ArrowUp':
+              this.showList()
+              this._highlightOption(activeOption || this._list.firstChild, -1)
+              this.scrollList()
+              e.preventDefault()
+              e.stopPropagation()
+              return
+
+            case 'ArrowDown':
+              this.showList()
+              this._highlightOption(activeOption || this._list.lastChild, 1)
+              this.scrollList()
+              e.preventDefault()
+              e.stopPropagation()
+              return
+            case 'ArrowRight':
+              this.focusFavorite()
+              return
+
+            case 'Tab':
+              this.hideList()
+              return
+          }
+
+          if (this !== current && !e.shiftKey) {
+            this.showList()
+          }
+        },
+      },
+      this._label,
+      this._filter,
+      this._list,
+      create('span', { class: 'ComboInput-icon', 'aria-hidden': true }),
+    )
+
+    if (
+      !this._container.getAttribute('aria-label') ||
+      this._container.getAttribute('aria-label').toLowerCase() === 'type'
+    ) {
+      const parentEl =
+        select.closest('.CIG-small') || select.closest('.CIG-large')
+      if (parentEl) {
+        let sibling = parentEl.previousElementSibling
+        if (
+          sibling &&
+          !sibling.classList.contains('CIG-label') &&
+          sibling.classList.contains('CIG-note')
+        ) {
+          sibling = sibling.previousElementSibling
+        }
+
+        if (sibling && sibling.classList.contains('CIG-label')) {
+          const label = sibling.querySelector('label')
+          if (label) {
+            const labelText = label.innerText
+            if (labelText) {
+              this._container.setAttribute('aria-label', labelText)
+            }
+          }
+        }
+      }
+    }
+
+    select.removeAttribute('id')
+
+    if (this._select.multiple) {
+      this._container.classList.add('is-multiple')
+      this._container.setAttribute(
+        'aria-label',
+        `${this._container.getAttribute('aria-label')}, ${
+          window?.BRIGHTSPOT?.ui?.tooltips?.combo?.multi
+        }`,
+      )
+    } else {
+      // Handles syncing with the underlying select for compatibility with v3 js
+      this._select.addEventListener('change', (event) => {
+        this.updateValue(event.target.value)
+      })
+    }
+
+    const observer = new MutationObserver((mutations) => {
+      let placeholderChanged
+
+      for (const mutation of mutations) {
+        for (const node of mutation.removedNodes) {
+          if (node === select) {
+            observer.disconnect()
+            return
+          }
+        }
+
+        if (
+          mutation.attributeName === 'data-placeholder' ||
+          mutation.attributeName === 'placeholder'
+        ) {
+          placeholderChanged = true
+        }
+      }
+
+      if (placeholderChanged) {
+        this._label.dataset.placeholder =
+          this._select.dataset.placeholder ||
+          this._select.getAttribute('placeholder')
+      }
+
+      if (this._select.value && this._missing) {
+        this._missing.checked = false
+        this._missing.dispatchEvent(
+          new CustomEvent('change', { bubbles: true }),
+        )
+      }
+      this.updateList()
+      this._setFocus()
+      this.updateLabel()
+    }).observe(select, {
+      childList: true,
+      subtree: true,
+      attributeFilter: ['data-placeholder', 'placeholder'],
+    })
+
+    if (!select.isConnected) return
+
+    select.hidden = true
+    select.parentNode.insertBefore(this._container, select.nextSibling)
+  }
+
+  destroy() {
+    this._container.remove()
+    this._list.remove()
+    this._select.hidden = false
+
+    for (const c of [...this._select.classList]) {
+      if (c.startsWith('_')) {
+        this._select.classList.remove(c)
+      }
+    }
+  }
+
+  _reorderSelectOptions() {
+    const first = this._select.firstChild
+
+    for (const option of Array.from(
+      findAll(this._select, 'option'),
+    ).reverse()) {
+      if (option.selected) {
+        const parent = option.closest('optgroup') || this._select
+        parent.insertBefore(option, parent.firstChild)
+      }
+    }
+  }
+
+  handleIntersect = (entries, observer) => {
+    for (let entry of entries) {
+      if (entry.isIntersecting === false) {
+        this._list.style.display = 'none'
+      } else {
+        this._list.style.display = 'block'
+      }
+    }
+  }
+
+  scrollList() {
+    const active = this._getActiveOption()
+    if (!active) return
+    const listRect = this._list.getBoundingClientRect()
+    const optionRect = active.getBoundingClientRect()
+
+    // ensures the list scrolls only when the option is not in view
+    if (optionRect.bottom > listRect.bottom) {
+      active.scrollIntoView(false)
+    } else if (optionRect.top < listRect.top) {
+      active.scrollIntoView(true)
+    }
+  }
+
+  toggleSelection(checkbox, group) {
+    checkbox.classList.toggle('is-checked')
+    const id = group.getAttribute('data-value')
+    const options = findAll(
+      this._list,
+      `.ComboInput-option[data-source="${CSS.escape(id)}"]`,
+    )
+    for (let key = 0; key < options.length; key++) {
+      options[key].setAttribute(
+        'aria-selected',
+        checkbox.classList.contains('is-checked'),
+      )
+    }
+    this.updateLabel()
+  }
+
+  updateSelection(group) {
+    if (group) {
+      const id = group.getAttribute('data-value')
+      const escapedId = CSS.escape(id)
+      let options = findAll(
+        this._list,
+        `.ComboInput-option[data-source="${escapedId}"]:not([data-is-hidden])`,
+      )
+      if (options.length === 0) {
+        group.setAttribute('data-hidden', true)
+        return
+      }
+      const selectedOptions = findAll(
+        this._list,
+        `.ComboInput-option[data-source="${escapedId}"][aria-selected="true"]`,
+      )
+      const checkbox = find(group, '.ComboInput-selectOption')
+      checkbox.classList.toggle(
+        'is-checked',
+        options.length > 0 && options.length === selectedOptions.length,
+      )
+    }
+  }
+
+  updateList() {
+    if (this._select.dataset.collapseDuplicateOptions) {
+      // Only collapse if underlying select supports multiples.
+      if (this._select.hasAttribute('multiple')) {
+        const children = Array.from(this._select.childNodes)
+
+        for (const child of children) {
+          if (this._duplicates.has(child.value)) {
+            continue
+          }
+
+          const duplicates = children.filter(
+            (c) => c.textContent === child.textContent,
+          )
+
+          if (duplicates.length > 1) {
+            duplicates.forEach((option, i) => {
+              if (i === 0) {
+                this._duplicates.set(option.value, {
+                  display: true,
+                  text: option.textContent,
+                })
+              } else {
+                this._duplicates.set(option.value, {
+                  display: false,
+                  text: option.textContent,
+                })
+              }
+            })
+          }
+        }
+      } else {
+        console.warn(
+          'Select element has "data-collapse-duplicate-options" without a "multiple" attribute.',
+          this._select,
+        )
+      }
+    }
+
+    this._list.innerHTML = ''
+    this._createOptions(this._select, 0)
+  }
+
+  _createOptions(select, index, group, grpIdx) {
+    if (!grpIdx) {
+      grpIdx = 0
+    }
+    for (const child of select.childNodes) {
+      switch (child.tagName) {
+        case 'OPTGROUP': {
+          const grpId = `${this._list.id}-g${grpIdx++}`
+          const optionGroup = create('ul', {
+            className: 'ComboInput-optionGroup',
+            role: 'group',
+            'aria-labelledby': grpId,
+          })
+          const sectionHeading = create(
+            'div',
+            { id: grpId, className: 'ComboInput-heading' },
+            child.label,
+          )
+          const option = create('li', sectionHeading, optionGroup)
+          if (child.getAttribute('data-select-option')) {
+            optionGroup.dataset.selectOption = child.dataset.selectOption
+            sectionHeading.dataset.value = child.getAttribute('value')
+            sectionHeading.appendChild(
+              create('span', {
+                className: 'ComboInput-selectOption',
+                onclick: (e) => {
+                  this.toggleSelection(e.target, sectionHeading)
+                },
+              }),
+            )
+          }
+          this._list.appendChild(option)
+          index = this._createOptions(child, index, optionGroup, grpIdx)
+          break
+        }
+
+        case 'OPTION': {
+          let htmlString = child.dataset.dropDownHtml || child.dataset.labelHtml
+          if (!child.getAttribute('data-create')) {
+            const opt = create(
+              'li',
+              {
+                id: `${this._list.id}-o${index++}`,
+                className: 'ComboInput-option',
+                role: 'option',
+                'aria-selected':
+                  !(this._missing && this._missing.checked) &&
+                  (child.selected || child.value === select.value),
+                'data-value': child.value,
+              },
+              create('span', {
+                class: 'ComboInput-check',
+                'aria-hidden': true,
+              }),
+              htmlString
+                ? create('div', {
+                    className: 'ComboInput-option-iframe',
+                    innerHTML: htmlString,
+                  })
+                : child.label || '',
+            )
+            if (
+              !opt.textContent &&
+              (select.dataset.placeholder || select.getAttribute('placeholder'))
+            ) {
+              opt.appendChild(
+                create(
+                  'div',
+                  { className: 'ComboInput-option-iframe' },
+                  create(
+                    'span',
+                    { className: 'ContentSelector-placeholder' },
+                    select.dataset.placeholder ||
+                      select.getAttribute('placeholder'),
+                  ),
+                ),
+              )
+            }
+            if (
+              this._duplicates.has(child.value) &&
+              !this._duplicates.get(child.value).display
+            ) {
+              opt.classList.add('is-hidden')
+            }
+            if (!child.label && opt.children.length <= 1) {
+              opt.classList.add('is-empty')
+              opt.setAttribute('aria-label', tooltips?.combo?.empty)
+            }
+
+            if (this._modifier === 'is-hidePlaceholder') {
+              // hide placeholder option from screen reader
+              const placeholderElm =
+                child.value === '' &&
+                opt.querySelector('.ContentSelector-placeholder')
+              if (
+                opt.classList.contains('is-empty') ||
+                placeholderElm ||
+                child.dataset.allTypes === 'true'
+              ) {
+                opt.role = 'presentation'
+                opt.setAttribute('aria-selected', 'false')
+                opt.classList.add('ComboInput-placeholder-option')
+                opt.classList.remove('ComboInput-option')
+              }
+            }
+
+            if (
+              this._duplicates.has(child.value) &&
+              !this._duplicates.get(child.value).display
+            ) {
+              opt.classList.add('is-hidden')
+            }
+            if (child.getAttribute('data-can-favorite')) {
+              let favButtonClassName = 'ComboInput-option-favorite'
+              let favTitle = tooltips?.action?.unfavorite
+              if (!child.parentElement.getAttribute('data-favorites')) {
+                const favOptGroup = this._select.querySelector(
+                  'optgroup[data-favorites]',
+                )
+                if (favOptGroup) {
+                  const existingFav = favOptGroup.querySelector(
+                    `option[value="${CSS.escape(child.value)}"]`,
+                  )
+                  if (!existingFav) {
+                    favButtonClassName = favButtonClassName + ' is-unstarred'
+                    favTitle = tooltips?.action?.favorite
+                  }
+                } else {
+                  favButtonClassName = favButtonClassName + ' is-unstarred'
+                  favTitle = tooltips?.action?.favorite
+                }
+              }
+              const favButton = create(
+                'button',
+                {
+                  className: favButtonClassName,
+                  type: 'button',
+                  'data-id': child.value,
+                  title: favTitle,
+                  'aria-label': favTitle,
+                  onkeydown: async (e) => {
+                    switch (e.code) {
+                      case 'ArrowLeft':
+                        this._filter.focus()
+                        return
+                      case 'ArrowUp':
+                      case 'ArrowDown':
+                        this._filter.focus()
+                        this.showList()
+                        this._highlightOption(
+                          this._getActiveOption(),
+                          e.code === 'ArrowUp' ? -1 : 1,
+                        )
+                        this.scrollList()
+                        return
+                      case 'Escape':
+                        this.hideList()
+                        this._container.focus()
+                        e.stopPropagation()
+                        return
+                      case 'Tab':
+                        this._filter.focus()
+                        this.hideList()
+                        return
+                    }
+                  },
+                  onclick: async (evt) => {
+                    const connectedFavorites = this._list.querySelectorAll(`
+                      .ComboInput-option-favorite[data-id="${CSS.escape(child.value)}"]`)
+                    connectedFavorites.forEach((favorite) => {
+                      const status = favorite.classList.contains('is-unstarred')
+                        ? tooltips?.action?.unfavorite
+                        : tooltips?.action?.favorite
+                      favorite.title = status
+                      favorite.nextElementSibling.textContent = status
+                      favorite.classList.toggle('is-unstarred')
+                      favorite.setAttribute('aria-label', status)
+                    })
+                    let url
+                    let typeIds = child.getAttribute('data-typeids')
+                    if (typeIds) {
+                      let typeIdsParam = typeIds.split(',').join('&typeIds=')
+                      url =
+                        CONTEXT_PATH +
+                        'update-dropdown-favorites?action=update&typeIds=' +
+                        typeIdsParam +
+                        '&id=' +
+                        child.value
+                    } else {
+                      url =
+                        CONTEXT_PATH +
+                        'update-dropdown-favorites?action=update&typeIds=' +
+                        child.value
+                    }
+                    const headers = new Headers()
+                    headers.append('Brightspot-CSRF', Cookies.get('bsp.csrf'))
+                    try {
+                      const response = await fetch(url, {
+                        method: 'POST',
+                        headers: headers,
+                      })
+                      if (
+                        response.redirected &&
+                        response.url.includes(
+                          window.BRIGHTSPOT.web.pagePaths[
+                            'com.psddev.cms.auth.LogInPage'
+                          ],
+                        )
+                      ) {
+                        throw new Error(
+                          'ComboInput: Redirected response received for click.',
+                        )
+                      }
+                    } catch (error) {
+                      console.error(error)
+                    }
+                  },
+                },
+                create('span', {
+                  class: 'ComboInput-option-favorite-icon',
+                  'aria-hidden': true,
+                }),
+              )
+              opt.appendChild(favButton)
+              opt.appendChild(
+                create('span', {
+                  'aria-live': 'polite',
+                  class: 'screen-reader-only',
+                }),
+              )
+            }
+            if (child.getAttribute('data-source')) {
+              opt.setAttribute('data-source', child.getAttribute('data-source'))
+            }
+            if (group) {
+              group.appendChild(opt)
+            } else {
+              this._list.appendChild(opt)
+            }
+          } else if (
+            child.getAttribute('data-create-types') &&
+            !child.closest('.SearchWidget-filter')
+          ) {
+            const createTypes = JSON.parse(child.dataset.createTypes)
+            this._createNewList = create(
+              'ul',
+              {
+                role: 'listbox',
+                hidden: 'true',
+              },
+              createTypes.map((c) =>
+                create(
+                  'li',
+                  {
+                    className: 'ComboInput-option',
+                    'data-sublist': true,
+                    role: 'none', // Set role to none until list expanded to ensure screen reader does not count this item in total list count.
+                    id: `${this._list.id}-o${index++}`,
+                  },
+                  create('a', {
+                    className: 'objectId-create nested',
+                    tabIndex: '-1', // Prevent default tabbing behavior for items in list.
+                    href: c.href,
+                    target: `create-new-object-${this._list.id}`,
+                    'data-create': true,
+                    'data-popup-mode': 'noGap fromBottom',
+                    innerHTML: c.label || '',
+                  }),
+                ),
+              ),
+            )
+            this._createNewListItem = create(
+              'li',
+              {
+                className: 'ComboInput-option nested',
+                'data-create': true,
+                role: 'button',
+                'aria-expanded': false,
+                'aria-label': child.label,
+                id: `${this._list.id}-o${index++}`,
+                onclick: (e) => {
+                  if (e.target.tagName !== 'A') {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    this.toggleCreateNewList()
+                    this._filter.focus()
+                  }
+                },
+              },
+              create(
+                'span',
+                {
+                  innerHTML: child.label || '',
+                  className: 'ComboInput-option-nestedLabel',
+                  'data-create': true,
+                },
+                create(
+                  'span',
+                  {
+                    className: 'ComboInput-option-arrow',
+                  },
+                  create('span', {
+                    class: 'ComboInput-option-arrow-icon',
+                    'aria-hidden': true,
+                  }),
+                ),
+              ),
+              this._createNewList,
+            )
+
+            this._list.insertBefore(
+              this._createNewListItem,
+              this._list.firstElementChild,
+            )
+          } else if (
+            child.getAttribute('data-create') &&
+            !child.closest('.SearchWidget-filter')
+          ) {
+            this._list.insertBefore(
+              create(
+                'li',
+                {
+                  id: `${this._list.id}-o${index++}`,
+                  className: 'ComboInput-option',
+                  role: 'option',
+                  'aria-selected': false,
+                  'data-create': true,
+                },
+                create('span', {
+                  class: 'ComboInput-check',
+                  'aria-hidden': true,
+                }),
+                create('a', {
+                  className: 'objectId-create',
+                  href: child.getAttribute('data-href'),
+                  target: `create-new-object-${this._list.id}`,
+                  'data-create': true,
+                  'data-popup-mode': 'noGap fromBottom',
+                  innerHTML: child.label || '',
+                }),
+              ),
+              this._list.firstElementChild,
+            )
+          }
+          break
+        }
+      }
+    }
+
+    if (this._missing && !find(this._list, '[data-missing-option=true]')) {
+      const missing = create(
+        'li',
+        {
+          id: `${this._list.id}-o${index++}`,
+          className: 'ComboInput-option',
+          role: 'option',
+          'data-missing-option': true,
+          'aria-selected': this._missing.checked,
+        },
+        create('span', {
+          class: 'ComboInput-check',
+          'aria-hidden': true,
+        }),
+        window.SEARCH_FILTER_IS_MISSING
+          ? window.SEARCH_FILTER_IS_MISSING
+          : 'Is Missing',
+      )
+
+      if (this._list.firstElementChild.getAttribute('data-value')) {
+        this._list.insertBefore(missing, this._list.firstElementChild)
+      } else {
+        this._list.insertBefore(
+          missing,
+          this._list.firstElementChild.nextElementSibling,
+        )
+      }
+    }
+
+    if (
+      this._select.multiple &&
+      this._select.getAttribute('data-allow-select-all')
+    ) {
+      const selectAll = create(
+        'li',
+        {
+          id: `${this._list.id}-o${index++}`,
+          className: 'ComboInput-option',
+          role: 'option',
+          'data-select-all': true,
+          'aria-selected':
+            findAll(this._list, '[aria-selected=true]').length ===
+            this._getOptions().length,
+        },
+        create('span', {
+          class: 'ComboInput-check',
+          'aria-hidden': true,
+        }),
+        this._select.getAttribute('data-select-all-label'),
+      )
+      this._list.insertBefore(selectAll, this._list.firstElementChild)
+    }
+
+    return index
+  }
+
+  _getOptions() {
+    return findAll(this._list, '.ComboInput-option')
+  }
+
+  _highlightOption(option, move) {
+    if (!option) {
+      return
+    }
+
+    const options = []
+
+    for (const o of this._getOptions()) {
+      o.classList.remove('is-active')
+
+      if (!o.hidden && !o.parentElement.hidden) {
+        options.push(o)
+      }
+    }
+
+    const length = options.length
+    let index
+
+    for (let i = 0; i < length; ++i) {
+      if (option === options[i]) {
+        index = i
+        break
+      }
+    }
+
+    index = (index + move) % length
+
+    while (index < 0) {
+      index += length
+    }
+
+    const highlight = options[index]
+
+    if (highlight) {
+      this._filter.setAttribute('aria-activedescendant', highlight.id)
+      highlight.classList.add('is-active')
+    }
+  }
+
+  _getActiveOption() {
+    return find(this._list, '.ComboInput-option.is-active')
+  }
+
+  /**
+   * 1. If no options are selected before listbox receives focus, the first option in the list receives focus
+   * 2. If options are selected before listbox receives focus:
+   *    - If it's a single-select listbox, the selected option receives focus
+   *    - If it's multi-select listbox, focus is set on the first option from the selected list of options
+   */
+  _setFocus() {
+    let itemIndex = 0
+    if (this._list.querySelector('li[aria-selected="true"]')) {
+      const options = this._getOptions()
+      while (
+        itemIndex < options.length &&
+        options[itemIndex].matches('[aria-selected="false"]')
+      ) {
+        itemIndex++
+      }
+    }
+    this._highlightOption(find(this._list, '.ComboInput-option'), itemIndex)
+  }
+
+  updateLabel() {
+    this._label.innerHTML = ''
+    this._selectParent = this._select.parentElement
+    this._actionCreateEl = this._selectParent
+      ? this._selectParent.querySelector('.action.action-create')
+      : null
+
+    const selectAll = find(
+      this._list,
+      '[data-select-all=true][aria-selected=true]',
+    )
+    if (selectAll) {
+      this._label.appendChild(
+        create(
+          'div',
+          { className: 'ComboInput-selected' },
+          selectAll.textContent || '',
+        ),
+      )
+    } else {
+      const selected = Array.prototype.filter.call(
+        this._getOptions(),
+        (child) =>
+          child.getAttribute('aria-selected') === 'true' &&
+          !child.getAttribute('data-no-permission'),
+      )
+
+      const displays = []
+
+      for (const child of selected) {
+        const childCopy = child.cloneNode(true)
+        const selection = this._select.closest('.SearchWidget-filterItem')
+
+        if (selection) {
+          this._select.classList.toggle(
+            'is-readOnly',
+            selection.parentNode.classList.contains('is-multiple') &&
+              childCopy.getAttribute('data-value'),
+          )
+        }
+
+        // Remove any markup used for Favorites display.
+        childCopy.querySelector('[data-id]')?.remove()
+
+        let display
+        if (childCopy.getAttribute('data-missing-option')) {
+          let placeholderOption = find(
+            this._list,
+            '.ComboInput-option[data-value=""]',
+          )
+          if (!placeholderOption) {
+            placeholderOption = find(
+              this._list,
+              '.ComboInput-placeholder-option',
+            )
+          }
+          display = childCopy.textContent + ': ' + placeholderOption?.innerHTML
+        } else {
+          display = childCopy.innerHTML
+        }
+
+        if (display && !displays.some((d) => d === display)) {
+          displays.push(display)
+        }
+      }
+
+      let display
+      const displaysLength = displays.length
+
+      if (displaysLength > 0) {
+        if (this._select.closest('.CIG-row')) {
+          display = displays.join(', ')
+        } else {
+          display = displays[0]
+
+          if (displaysLength > 1) {
+            display += ` +${displaysLength - 1}`
+          }
+        }
+      }
+
+      if (display) {
+        this._label.appendChild(
+          create('div', {
+            className: 'ComboInput-selected',
+            innerHTML: display,
+          }),
+        )
+        if (this._actionCreateEl) {
+          this._actionCreateEl.setAttribute(
+            'aria-label',
+            `${this._actionCreateEl.innerText.toLowerCase()} ${
+              this._label.innerText
+            }`,
+          )
+        }
+      }
+    }
+  }
+
+  async populateFavorites() {
+    if (this._select.querySelector('option[data-can-favorite]')) {
+      // If the select has a sibling input element, that will have data-typeIds attr and this is a content dropdown;
+      // else, this is a type dropdown. If it is an ObjectType, the typeIds will populate in typesArrayOption instead
+      // of validTypeIds.
+      const input = this._select.parentNode.querySelector('input[data-typeids]')
+      const validTypeIds = this._select.getAttribute('data-typeIds')
+      var options = this._select.options
+      const typesArrayOptions = Array.from(options).map(
+        (option) => option.value,
+      )
+      const hasDataTypeids = Array.from(options).some((option) =>
+        option.hasAttribute('data-typeids'),
+      )
+      let url
+      let data = new FormData()
+      if (input && hasDataTypeids) {
+        const validTypeIdsParam = input.getAttribute('data-typeIds').split(',')
+        url =
+          CONTEXT_PATH +
+          'update-dropdown-favorites?action=getExisting&isFavoritedType=false'
+        validTypeIdsParam.forEach((id) => {
+          data.append('validTypeIds', id)
+        })
+      } else if (validTypeIds || typesArrayOptions) {
+        url =
+          CONTEXT_PATH +
+          'update-dropdown-favorites?action=getExisting&isFavoritedType=true'
+        const typeIds = validTypeIds
+          ? validTypeIds.split(',')
+          : typesArrayOptions
+        typeIds.forEach((id) => {
+          data.append('validTypeIds', id)
+        })
+      } else {
+        url =
+          CONTEXT_PATH +
+          'update-dropdown-favorites?action=getExisting&isFavoritedType=true'
+      }
+      const headers = new Headers()
+      headers.append('Brightspot-CSRF', Cookies.get('bsp.csrf'))
+      try {
+        const response = await fetch(url, {
+          method: 'POST',
+          headers: headers,
+          body: data,
+        })
+        if (
+          response.redirected &&
+          response.url.includes(
+            window.BRIGHTSPOT.web.pagePaths['com.psddev.cms.auth.LogInPage'],
+          )
+        ) {
+          throw new Error(
+            'ComboInput: Redirected response received for favorites.',
+          )
+        }
+        const responseText = await response.text()
+        const favOptGroup = new DOMParser()
+          .parseFromString(responseText, 'text/html')
+          .body.querySelector('optgroup')
+        const oldFavorites = this._select.querySelector(
+          'optgroup[data-favorites]',
+        )
+        if (oldFavorites) {
+          const selectedOptions = Array.from(
+            this._list.querySelectorAll('li[aria-selected="true"]'),
+          )
+
+          const selectedValues = new Set(
+            selectedOptions.map((li) => li.dataset.value),
+          )
+
+          for (const option of this._select.querySelectorAll('option')) {
+            if (selectedValues.has(option.value)) {
+              option.selected = true
+            }
+          }
+
+          oldFavorites.remove()
+        }
+        if (favOptGroup && favOptGroup.hasChildNodes()) {
+          const allTypesOption = this._select.querySelector(
+            'option[data-all-types]',
+          )
+          const dataMirror = this._select.querySelector('option[data-mirror]')
+          if (allTypesOption) {
+            allTypesOption.after(favOptGroup)
+          } else if (dataMirror) {
+            dataMirror.after(favOptGroup)
+          } else {
+            this._select.prepend(favOptGroup)
+          }
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  }
+
+  focusFavorite() {
+    const highlight = this._getActiveOption() || this._list.lastChild
+    const fav = highlight.querySelector('.ComboInput-option-favorite')
+    if (fav) {
+      fav.focus()
+    }
+  }
+
+  showList() {
+    if (this._container.getAttribute('aria-expanded') === 'true') {
+      return true
+    }
+
+    if (this._select.classList.contains('is-readOnly')) {
+      return
+    }
+
+    if (current) {
+      current.hideList()
+    }
+
+    this._container.style.width = `${
+      this._container.getBoundingClientRect().width
+    }px`
+
+    this._container.setAttribute('aria-expanded', 'true')
+    this._filter.value = ''
+    this._filter.focus()
+    this.filterList()
+
+    this._setFocus()
+
+    for (const group of findAll(this._list, '.ComboInput-heading')) {
+      if (group.getAttribute('data-value')) {
+        this.updateSelection(group)
+      }
+    }
+
+    current = this
+
+    this._list.classList.add('is-expanded')
+    this._tether = new Tether(this._container, this._list)
+
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0,
+    }
+    if (!this._observer) {
+      this._observer = new IntersectionObserver(this.handleIntersect, options)
+    }
+    this._observer.observe(this._container)
+  }
+
+  hideList() {
+    if (this._container.getAttribute('aria-expanded') === 'false') {
+      return true
+    }
+
+    if (this._observer) {
+      this._observer.unobserve(this._container)
+    }
+    if (this._tether) {
+      this._tether.destroy()
+    }
+    // Reset filter value as dynamic values are updated by content state handler, and trigger input event so that contentState can update values
+    this._filter.value = ''
+    this._filter.dispatchEvent(new Event('input', { bubbles: true }))
+
+    current = null
+
+    this._container.style.width = ''
+
+    if (this._createNewListItem?.getAttribute('aria-expanded') === 'true') {
+      this.toggleCreateNewList()
+    }
+
+    this._container.setAttribute('aria-expanded', 'false')
+    this._list.classList.remove('is-expanded')
+
+    if (this._select.multiple) {
+      const values = new Set()
+
+      for (const child of this._getOptions()) {
+        if (
+          child.getAttribute('aria-selected') === 'true' &&
+          !child.getAttribute('data-select-all')
+        ) {
+          values.add(child.getAttribute('data-value'))
+        }
+      }
+
+      let changed = false
+
+      for (const option of findAll(this._select, 'option')) {
+        const newSelected = values.has(option.value)
+
+        if (option.selected !== newSelected) {
+          changed = true
+        }
+
+        option.selected = newSelected
+      }
+
+      this._reorderSelectOptions()
+
+      if (changed) {
+        this._select.dispatchEvent(new CustomEvent('change', { bubbles: true }))
+      }
+    }
+
+    this._select.dispatchEvent(
+      new CustomEvent('combo-input:hide', { bubbles: true }),
+    )
+  }
+
+  toggleList() {
+    if (this._container.getAttribute('aria-expanded') === 'true') {
+      this.hideList()
+    } else {
+      this.showList()
+    }
+  }
+
+  toggleCreateNewList() {
+    if (
+      this._container.getAttribute('aria-expanded') === 'true' &&
+      this._createNewListItem.getAttribute('aria-expanded') === 'true'
+    ) {
+      this._createNewList.setAttribute('hidden', '')
+      this._createNewListItem.setAttribute('aria-expanded', 'false')
+      for (const item of this._createNewList.children) {
+        item?.setAttribute('role', 'none')
+      }
+    } else if (
+      this._createNewListItem.getAttribute('aria-expanded') === 'false'
+    ) {
+      this._createNewList.removeAttribute('hidden')
+      this._createNewListItem.setAttribute('aria-expanded', 'true')
+
+      for (const item of this._createNewList.children) {
+        item?.setAttribute('role', 'option')
+      }
+    }
+  }
+
+  async filterList() {
+    const value = this._filter.value
+    const optionsUrl = this._getOptionsUrl
+      ? this._getOptionsUrl(this._filter.value)
+      : null
+
+    if (optionsUrl && !(this._fetchOnce && this._optionsLoaded)) {
+      try {
+        ++this._getOptionsIndex
+        const index = this._getOptionsIndex
+
+        // In fetch-once mode, always fetch with empty query to get all options
+        const fetchUrl = this._fetchOnce ? this._getOptionsUrl('') : optionsUrl
+
+        const response = await fetch(fetchUrl, {
+          credentials: 'include',
+        })
+        if (
+          response.redirected &&
+          response.url.includes(
+            window.BRIGHTSPOT.web.pagePaths['com.psddev.cms.auth.LogInPage'],
+          )
+        ) {
+          throw new Error(
+            'ComboInput: Redirected response received for options update.',
+          )
+        }
+        const optionsHtml = await response.text()
+
+        if (this._getOptionsIndex === index) {
+          const selectedOptions = []
+          const selectedValues = new Set()
+          if (!this._select.value && this._select.firstChild) {
+            this._select.firstChild.selected = true
+          }
+          for (const o of findAll(this._select, 'option')) {
+            if (o.selected) {
+              selectedOptions.push(o)
+              selectedValues.add(o.value)
+            }
+          }
+
+          this._select.innerHTML = optionsHtml
+
+          for (const o of findAll(this._select, 'option')) {
+            if (selectedValues.has(o.value)) {
+              o.remove()
+            }
+          }
+
+          const first = this._select.firstChild
+
+          for (const o of selectedOptions) {
+            this._select.insertBefore(o, first)
+          }
+
+          // If fetch-once mode, mark as loaded for client-side filtering on subsequent calls
+          if (this._fetchOnce) {
+            this._optionsLoaded = true
+          }
+        }
+      } catch (error) {
+        console.error(error)
+      }
+      if (!value || value.trim().length === 0) {
+        this.populateFavorites()
+      }
+    } else {
+      if (value && !this._select.getAttribute('data-dynamic-value-generator')) {
+        const re = new RegExp(
+          value.replace(/\s/, '').split('').join('(?:.*\\W)?'),
+          'i',
+        )
+
+        let highlighted
+
+        for (const child of this._getOptions()) {
+          if (re.test(child.textContent)) {
+            child.hidden = false
+
+            if (!highlighted) {
+              highlighted = true
+              this._highlightOption(child, 0)
+            }
+          } else {
+            child.hidden = true
+          }
+        }
+      } else {
+        for (const child of this._getOptions()) {
+          child.hidden = false
+        }
+        this.populateFavorites()
+      }
+    }
+  }
+
+  updateValue(value, missing) {
+    const selectAllOption = find(this._list, '[data-select-all=true]')
+    if (this._select.multiple) {
+      if (
+        selectAllOption &&
+        value === selectAllOption.getAttribute('data-value')
+      ) {
+        selectAllOption.setAttribute(
+          'aria-selected',
+          selectAllOption.getAttribute('aria-selected') !== 'true',
+        )
+        findAll(
+          this._list,
+          '.ComboInput-option:not([data-select-all])',
+        ).forEach((child) => {
+          child.setAttribute(
+            'aria-selected',
+            selectAllOption.getAttribute('aria-selected'),
+          )
+        })
+      } else {
+        const escapedValue = CSS.escape(value)
+        const selectedOption = find(
+          this._list,
+          `.ComboInput-option[data-value="${escapedValue}"]`,
+        )
+        if (!selectedOption) {
+          return
+        }
+        if (this._duplicates.has(value)) {
+          for (const key of this._duplicates.keys()) {
+            if (this._duplicates.get(key).text === selectedOption.textContent) {
+              const duplicate = find(
+                this._list,
+                `.ComboInput-option[data-value="${CSS.escape(key)}"]`,
+              )
+              duplicate.setAttribute(
+                'aria-selected',
+                duplicate.getAttribute('aria-selected') !== 'true',
+              )
+            }
+          }
+        } else {
+          selectedOption.setAttribute(
+            'aria-selected',
+            selectedOption.getAttribute('aria-selected') !== 'true',
+          )
+        }
+        if (selectAllOption) {
+          selectAllOption.setAttribute(
+            'aria-selected',
+            findAll(this._list, '[aria-selected=true]').length ===
+              this._getOptions().length,
+          )
+        }
+
+        const source = selectedOption.getAttribute('data-source')
+        if (source != null) {
+          this.updateSelection(
+            find(
+              this._list,
+              `.ComboInput-heading[data-value="${CSS.escape(source)}"]`,
+            ),
+          )
+        }
+      }
+
+      this._filter.focus()
+      this._filter.select()
+    } else {
+      if (missing) {
+        find(this._list, '[data-missing-option=true]').setAttribute(
+          'aria-selected',
+          !this._missing.checked,
+        )
+        const selectedOption = Array.from(this._getOptions()).find(
+          (option) =>
+            option.getAttribute('role') === 'option' &&
+            option.getAttribute('aria-selected') === 'true' &&
+            option.getAttribute('data-missing-option') !== 'true',
+        )
+        if (selectedOption) {
+          selectedOption.setAttribute('aria-selected', 'false')
+        }
+      } else {
+        for (const child of this._getOptions()) {
+          if (child.getAttribute('role') === 'option') {
+            if (value === child.getAttribute('data-value')) {
+              child.setAttribute('aria-selected', 'true')
+            } else {
+              child.setAttribute('aria-selected', 'false')
+            }
+          }
+        }
+      }
+
+      this.hideList()
+      if (missing) {
+        if (this._missing.checked) {
+          this._missing.checked = false
+        } else {
+          this._missing.checked = true
+          this._select.value = value
+        }
+        this._missing.dispatchEvent(
+          new CustomEvent('change', { bubbles: true }),
+        )
+      } else if (this._select.value !== value) {
+        this._select.value = value
+        this._select.dispatchEvent(new CustomEvent('change', { bubbles: true }))
+        if (this._missing) {
+          this._missing.checked = false
+          this._missing.dispatchEvent(
+            new CustomEvent('change', { bubbles: true }),
+          )
+        }
+      } else if (this._missing && this._missing.checked) {
+        this._missing.checked = false
+        this._missing.dispatchEvent(
+          new CustomEvent('change', { bubbles: true }),
+        )
+      }
+    }
+
+    this.updateLabel()
+  }
+}
+
+// Hide list when clicked outside.
+window.addEventListener(
+  'click',
+  ifClick((event) => {
+    if (current && !current._container.contains(event.target)) {
+      current.hideList()
+    }
+  }),
+)