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

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

@@ -1,1491 +0,0 @@
-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()
-    }
-  }),
-)