primer_view_components 0.27.0 → 0.29.0

data/app/components/primer/alpha/select_panel_element.ts

@@ -0,0 +1,1049 @@
+import {getAnchoredPosition} from '@primer/behaviors'
+import {controller, target} from '@github/catalyst'
+import {announceFromElement, announce} from '../aria_live'
+import {IncludeFragmentElement} from '@github/include-fragment-element'
+import type {PrimerTextFieldElement} from 'lib/primer/forms/primer_text_field'
+import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
+import '@oddbird/popover-polyfill'
+
+type SelectVariant = 'none' | 'single' | 'multiple' | null
+type SelectedItem = {
+  label: string | null | undefined
+  value: string | null | undefined
+  inputName: string | null | undefined
+  element: SelectPanelItem
+}
+
+const validSelectors = ['[role="option"]']
+const menuItemSelectors = validSelectors.join(',')
+const visibleMenuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(',')
+
+export type SelectPanelItem = HTMLLIElement
+
+enum FetchStrategy {
+  REMOTE,
+  EVENTUALLY_LOCAL,
+  LOCAL,
+}
+
+enum ErrorStateType {
+  BODY,
+  BANNER,
+}
+
+export type FilterFn = (item: SelectPanelItem, query: string) => boolean
+
+const updateWhenVisible = (() => {
+  const anchors = new Set<SelectPanelElement>()
+  let resizeObserver: ResizeObserver | null = null
+  function updateVisibleAnchors() {
+    for (const anchor of anchors) {
+      anchor.updateAnchorPosition()
+    }
+  }
+  return (el: SelectPanelElement) => {
+    // eslint-disable-next-line github/prefer-observers
+    window.addEventListener('resize', updateVisibleAnchors)
+    // eslint-disable-next-line github/prefer-observers
+    window.addEventListener('scroll', updateVisibleAnchors)
+
+    resizeObserver ||= new ResizeObserver(() => {
+      for (const anchor of anchors) {
+        anchor.updateAnchorPosition()
+      }
+    })
+    resizeObserver.observe(el.ownerDocument.documentElement)
+    el.addEventListener('dialog:close', () => {
+      anchors.delete(el)
+    })
+    el.addEventListener('dialog:open', () => {
+      anchors.add(el)
+    })
+  }
+})()
+
+@controller
+export class SelectPanelElement extends HTMLElement {
+  @target includeFragment: IncludeFragmentElement
+  @target dialog: HTMLDialogElement
+  @target filterInputTextField: HTMLInputElement
+  @target remoteInput: HTMLElement
+  @target list: HTMLElement
+  @target ariaLiveContainer: HTMLElement
+  @target noResults: HTMLElement
+  @target fragmentErrorElement: HTMLElement
+  @target bannerErrorElement: HTMLElement
+  @target bodySpinner: HTMLElement
+
+  filterFn?: FilterFn
+
+  #dialogIntersectionObserver: IntersectionObserver
+  #abortController: AbortController
+  #originalLabel = ''
+  #inputName = ''
+  #selectedItems: Map<string, SelectedItem> = new Map()
+  #loadingDelayTimeoutId: number | null = null
+  #loadingAnnouncementTimeoutId: number | null = null
+
+  get open(): boolean {
+    return this.dialog.open
+  }
+
+  get selectVariant(): SelectVariant {
+    return this.getAttribute('data-select-variant') as SelectVariant
+  }
+
+  get ariaSelectionType(): string {
+    return this.selectVariant === 'multiple' ? 'aria-checked' : 'aria-selected'
+  }
+
+  set selectVariant(variant: SelectVariant) {
+    if (variant) {
+      this.setAttribute('data-select-variant', variant)
+    } else {
+      this.removeAttribute('variant')
+    }
+  }
+
+  get dynamicLabelPrefix(): string {
+    const prefix = this.getAttribute('data-dynamic-label-prefix')
+    if (!prefix) return ''
+    return `${prefix}:`
+  }
+
+  get dynamicAriaLabelPrefix(): string {
+    const prefix = this.getAttribute('data-dynamic-aria-label-prefix')
+    if (!prefix) return ''
+    return `${prefix}:`
+  }
+
+  set dynamicLabelPrefix(value: string) {
+    this.setAttribute('data-dynamic-label', value)
+  }
+
+  get dynamicLabel(): boolean {
+    return this.hasAttribute('data-dynamic-label')
+  }
+
+  set dynamicLabel(value: boolean) {
+    this.toggleAttribute('data-dynamic-label', value)
+  }
+
+  get invokerElement(): HTMLButtonElement | null {
+    const id = this.querySelector('dialog')?.id
+    if (!id) return null
+    for (const el of this.querySelectorAll(`[aria-controls]`)) {
+      if (el.getAttribute('aria-controls') === id) {
+        return el as HTMLButtonElement
+      }
+    }
+    return null
+  }
+
+  get closeButton(): HTMLButtonElement | null {
+    return this.querySelector('button[data-close-dialog-id]')
+  }
+
+  get invokerLabel(): HTMLElement | null {
+    if (!this.invokerElement) return null
+    return this.invokerElement.querySelector('.Button-label')
+  }
+
+  get selectedItems(): SelectedItem[] {
+    return Array.from(this.#selectedItems.values())
+  }
+
+  get align(): AnchorAlignment {
+    return (this.getAttribute('anchor-align') || 'start') as AnchorAlignment
+  }
+
+  get side(): AnchorSide {
+    return (this.getAttribute('anchor-side') || 'outside-bottom') as AnchorSide
+  }
+
+  updateAnchorPosition() {
+    // If the selectPanel is removed from the screen on resize close the dialog
+    if (this && this.offsetParent === null) {
+      this.dialog.close()
+    }
+
+    if (this.invokerElement) {
+      const {top, left} = getAnchoredPosition(this.dialog, this.invokerElement, {
+        align: this.align,
+        side: this.side,
+        anchorOffset: 4,
+      })
+      this.dialog.style.top = `${top}px`
+      this.dialog.style.left = `${left}px`
+      this.dialog.style.bottom = 'auto'
+      this.dialog.style.right = 'auto'
+    }
+  }
+
+  connectedCallback() {
+    const {signal} = (this.#abortController = new AbortController())
+    this.addEventListener('keydown', this, {signal})
+    this.addEventListener('click', this, {signal})
+    this.addEventListener('mousedown', this, {signal})
+    this.addEventListener('input', this, {signal})
+    this.addEventListener('remote-input-success', this, {signal})
+    this.addEventListener('remote-input-error', this, {signal})
+    this.addEventListener('loadstart', this, {signal})
+    this.#setDynamicLabel()
+    this.#updateInput()
+    this.#softDisableItems()
+    updateWhenVisible(this)
+
+    this.#waitForCondition(
+      () => Boolean(this.remoteInput),
+      () => {
+        this.remoteInput.addEventListener('loadstart', this, {signal})
+        this.remoteInput.addEventListener('loadend', this, {signal})
+      },
+    )
+
+    this.#waitForCondition(
+      () => Boolean(this.includeFragment),
+      () => {
+        this.includeFragment.addEventListener('include-fragment-replaced', this, {signal})
+        this.includeFragment.addEventListener('error', this, {signal})
+        this.includeFragment.addEventListener('loadend', this, {signal})
+      },
+    )
+
+    this.#dialogIntersectionObserver = new IntersectionObserver(entries => {
+      for (const entry of entries) {
+        const elem = entry.target
+        if (entry.isIntersecting && elem === this.dialog) {
+          this.updateAnchorPosition()
+
+          if (this.#fetchStrategy === FetchStrategy.LOCAL) {
+            this.#updateItemVisibility()
+          }
+        }
+      }
+    })
+
+    this.#waitForCondition(
+      () => Boolean(this.dialog),
+      () => {
+        if (this.getAttribute('data-open-on-load') === 'true') {
+          this.show()
+        }
+
+        this.#dialogIntersectionObserver.observe(this.dialog)
+        this.dialog.addEventListener('close', this, {signal})
+      },
+    )
+
+    if (this.#fetchStrategy === FetchStrategy.LOCAL) {
+      this.#waitForCondition(
+        () => this.items.length > 0,
+        () => {
+          this.#updateItemVisibility()
+          this.#updateInput()
+        },
+      )
+    }
+  }
+
+  // Waits for condition to return true. If it returns false initially, this function creates a
+  // MutationObserver that calls body() whenever the contents of the component change.
+  #waitForCondition(condition: () => boolean, body: () => void) {
+    if (condition()) {
+      body()
+    } else {
+      const mutationObserver = new MutationObserver(() => {
+        if (condition()) {
+          body()
+          mutationObserver.disconnect()
+        }
+      })
+
+      mutationObserver.observe(this, {childList: true, subtree: true})
+    }
+  }
+
+  disconnectedCallback() {
+    this.#abortController.abort()
+  }
+
+  #softDisableItems() {
+    const {signal} = this.#abortController
+
+    for (const item of this.querySelectorAll(validSelectors.join(','))) {
+      item.addEventListener('click', this.#potentiallyDisallowActivation.bind(this), {signal})
+      item.addEventListener('keydown', this.#potentiallyDisallowActivation.bind(this), {signal})
+    }
+  }
+
+  // If there is an active item in single-select mode, set its tabindex to 0. Otherwise, set the
+  // first visible item's tabindex to 0. All other items should have a tabindex of -1.
+  #updateTabIndices() {
+    let setZeroTabIndex = false
+
+    if (this.selectVariant === 'single') {
+      for (const item of this.items) {
+        const itemContent = this.#getItemContent(item)
+        if (!itemContent) continue
+
+        if (!this.isItemHidden(item) && this.isItemChecked(item) && !setZeroTabIndex) {
+          itemContent.setAttribute('tabindex', '0')
+          setZeroTabIndex = true
+        } else {
+          itemContent.setAttribute('tabindex', '-1')
+        }
+
+        // <li> elements should not themselves be tabbable
+        item.setAttribute('tabindex', '-1')
+      }
+    } else {
+      for (const item of this.items) {
+        const itemContent = this.#getItemContent(item)
+        if (!itemContent) continue
+
+        if (!this.isItemHidden(item) && !setZeroTabIndex) {
+          setZeroTabIndex = true
+        } else {
+          itemContent.setAttribute('tabindex', '-1')
+        }
+
+        // <li> elements should not themselves be tabbable
+        item.setAttribute('tabindex', '-1')
+      }
+    }
+
+    if (!setZeroTabIndex && this.#firstItem) {
+      this.#getItemContent(this.#firstItem)?.setAttribute('tabindex', '0')
+    }
+  }
+
+  // returns true if activation was prevented
+  #potentiallyDisallowActivation(event: Event): boolean {
+    if (!this.#isActivation(event)) return false
+
+    const item = (event.target as HTMLElement).closest(visibleMenuItemSelectors)
+    if (!item) return false
+
+    if (item.getAttribute('aria-disabled')) {
+      event.preventDefault()
+
+      // eslint-disable-next-line no-restricted-syntax
+      event.stopPropagation()
+
+      // eslint-disable-next-line no-restricted-syntax
+      event.stopImmediatePropagation()
+      return true
+    }
+
+    return false
+  }
+
+  #isAnchorActivationViaSpace(event: Event): boolean {
+    return (
+      event.target instanceof HTMLAnchorElement &&
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+      event.key === ' '
+    )
+  }
+
+  #isActivation(event: Event): boolean {
+    // Some browsers fire MouseEvents (Firefox) and others fire PointerEvents (Chrome). Activating an item via
+    // enter or space counterintuitively fires one of these rather than a KeyboardEvent. Since PointerEvent
+    // inherits from MouseEvent, it is enough to check for MouseEvent here.
+    return (event instanceof MouseEvent && event.type === 'click') || this.#isAnchorActivationViaSpace(event)
+  }
+
+  #checkSelectedItems() {
+    for (const item of this.items) {
+      const itemContent = this.#getItemContent(item)
+      if (!itemContent) continue
+
+      const value = itemContent.getAttribute('data-value')
+
+      if (value) {
+        if (this.#selectedItems.has(value)) {
+          itemContent.setAttribute(this.ariaSelectionType, 'true')
+        }
+      }
+    }
+    this.#updateInput()
+  }
+
+  #addSelectedItem(item: SelectPanelItem) {
+    const itemContent = this.#getItemContent(item)
+    if (!itemContent) return
+
+    const value = itemContent.getAttribute('data-value')
+
+    if (value) {
+      this.#selectedItems.set(value, {
+        value,
+        label: itemContent.querySelector('.ActionListItem-label')?.textContent?.trim(),
+        inputName: itemContent.getAttribute('data-input-name'),
+        element: item,
+      })
+    }
+  }
+
+  #removeSelectedItem(item: Element) {
+    const value = item.getAttribute('data-value')
+
+    if (value) {
+      this.#selectedItems.delete(value)
+    }
+  }
+
+  #setTextFieldLoadingSpinnerTimer() {
+    if (this.#loadingDelayTimeoutId) clearTimeout(this.#loadingDelayTimeoutId)
+    if (this.#loadingAnnouncementTimeoutId) clearTimeout(this.#loadingAnnouncementTimeoutId)
+
+    this.#loadingAnnouncementTimeoutId = setTimeout(() => {
+      announce('Loading', {element: this.ariaLiveContainer})
+    }, 2000) as unknown as number
+
+    this.#loadingDelayTimeoutId = setTimeout(() => {
+      this.#filterInputTextFieldElement.showLeadingSpinner()
+    }, 1000) as unknown as number
+  }
+
+  handleEvent(event: Event) {
+    if (event.target === this.filterInputTextField) {
+      this.#handleSearchFieldEvent(event)
+      return
+    }
+
+    if (event.target === this.remoteInput) {
+      this.#handleRemoteInputEvent(event)
+      return
+    }
+
+    const targetIsInvoker = this.invokerElement?.contains(event.target as HTMLElement)
+    const targetIsCloseButton = this.closeButton?.contains(event.target as HTMLElement)
+    const eventIsActivation = this.#isActivation(event)
+
+    if (targetIsInvoker && event.type === 'mousedown') {
+      return
+    }
+
+    if (event.type === 'mousedown' && event.target instanceof HTMLInputElement) {
+      return
+    }
+
+    // Prevent safari bug that dismisses menu on mousedown instead of allowing
+    // the click event to propagate to the button
+    if (event.type === 'mousedown') {
+      event.preventDefault()
+      return
+    }
+
+    if (targetIsInvoker && eventIsActivation) {
+      this.#handleInvokerActivated(event)
+      return
+    }
+
+    if (targetIsCloseButton && eventIsActivation) {
+      // hide() will automatically be called by dialog event triggered from `data-close-dialog-id`
+      return
+    }
+
+    if (event.target === this.dialog && event.type === 'close') {
+      this.dispatchEvent(
+        new CustomEvent('panelClosed', {
+          detail: {panel: this},
+          bubbles: true,
+        }),
+      )
+
+      return
+    }
+
+    const item = (event.target as Element).closest(visibleMenuItemSelectors)?.parentElement as
+      | SelectPanelItem
+      | null
+      | undefined
+
+    const targetIsItem = item !== null && item !== undefined
+
+    if (targetIsItem && eventIsActivation) {
+      if (this.#potentiallyDisallowActivation(event)) return
+
+      const dialogInvoker = item.closest('[data-show-dialog-id]')
+
+      if (dialogInvoker) {
+        const dialog = this.ownerDocument.getElementById(dialogInvoker.getAttribute('data-show-dialog-id') || '')
+
+        if (dialog && this.contains(dialogInvoker) && this.contains(dialog)) {
+          this.#handleDialogItemActivated(event, dialog)
+          return
+        }
+      }
+
+      // Pressing the space key on a link will cause the page to scroll unless preventDefault() is called.
+      // We then click it manually to navigate.
+      if (this.#isAnchorActivationViaSpace(event)) {
+        event.preventDefault()
+        this.#getItemContent(item)?.click()
+      }
+
+      this.#handleItemActivated(item)
+
+      return
+    }
+
+    if (event.type === 'click') {
+      const rect = this.dialog.getBoundingClientRect()
+
+      const clickWasInsideDialog =
+        rect.top <= (event as MouseEvent).clientY &&
+        (event as MouseEvent).clientY <= rect.top + rect.height &&
+        rect.left <= (event as MouseEvent).clientX &&
+        (event as MouseEvent).clientX <= rect.left + rect.width
+
+      if (!clickWasInsideDialog) {
+        this.hide()
+      }
+    }
+
+    // The include fragment will have been removed from the DOM by the time
+    // the include-fragment-replaced event has been dispatched, so we have to
+    // check for the type of the event target manually, since this.includeFragment
+    // will be null.
+    if (event.target instanceof IncludeFragmentElement) {
+      this.#handleIncludeFragmentEvent(event)
+    }
+  }
+
+  #handleIncludeFragmentEvent(event: Event) {
+    switch (event.type) {
+      case 'include-fragment-replaced': {
+        this.#updateItemVisibility()
+        break
+      }
+
+      case 'loadstart': {
+        this.#toggleIncludeFragmentElements(false)
+        break
+      }
+
+      case 'loadend': {
+        this.dispatchEvent(new CustomEvent('loadend'))
+        break
+      }
+
+      case 'error': {
+        this.#toggleIncludeFragmentElements(true)
+
+        const errorElement = this.fragmentErrorElement
+        // check if the errorElement is visible in the dom
+        if (errorElement && !errorElement.hasAttribute('hidden')) {
+          announceFromElement(errorElement, {element: this.ariaLiveContainer, assertive: true})
+          return
+        }
+
+        break
+      }
+    }
+  }
+
+  #toggleIncludeFragmentElements(showError: boolean) {
+    for (const el of this.includeFragment.querySelectorAll('[data-show-on-error]')) {
+      if (el instanceof HTMLElement) el.hidden = !showError
+    }
+    for (const el of this.includeFragment.querySelectorAll('[data-hide-on-error]')) {
+      if (el instanceof HTMLElement) el.hidden = showError
+    }
+  }
+
+  #handleRemoteInputEvent(event: Event) {
+    switch (event.type) {
+      case 'remote-input-success': {
+        this.#clearErrorState()
+        this.#updateItemVisibility()
+        this.#checkSelectedItems()
+        break
+      }
+
+      case 'remote-input-error': {
+        this.bodySpinner?.setAttribute('hidden', '')
+
+        if (this.includeFragment || this.visibleItems.length === 0) {
+          this.#setErrorState(ErrorStateType.BODY)
+        } else {
+          this.#setErrorState(ErrorStateType.BANNER)
+        }
+
+        break
+      }
+
+      case 'loadstart': {
+        if (!this.#performFilteringLocally()) {
+          this.#clearErrorState()
+          this.bodySpinner?.removeAttribute('hidden')
+
+          if (this.bodySpinner) break
+          this.#setTextFieldLoadingSpinnerTimer()
+        }
+
+        break
+      }
+
+      case 'loadend': {
+        this.#filterInputTextFieldElement.hideLeadingSpinner()
+        if (this.#loadingAnnouncementTimeoutId) clearTimeout(this.#loadingAnnouncementTimeoutId)
+        if (this.#loadingDelayTimeoutId) clearTimeout(this.#loadingDelayTimeoutId)
+        this.dispatchEvent(new CustomEvent('loadend'))
+        break
+      }
+    }
+  }
+
+  #defaultFilterFn(item: HTMLElement, query: string) {
+    const text = (item.getAttribute('data-filter-string') || item.textContent || '').toLowerCase()
+    return text.indexOf(query.toLowerCase()) > -1
+  }
+
+  #handleSearchFieldEvent(event: Event) {
+    if (event.type === 'keydown' && (event as KeyboardEvent).key === 'ArrowDown') {
+      if (this.focusableItem) {
+        this.focusableItem.focus()
+        event.preventDefault()
+      }
+    }
+    if (event.type !== 'input') return
+
+    // remote-input-element does not trigger another loadstart event if a request is
+    // already in-flight, so we use the input event on the text field to reset the
+    // loading spinner timer instead
+    if (!this.bodySpinner && !this.#performFilteringLocally()) {
+      this.#setTextFieldLoadingSpinnerTimer()
+    }
+
+    if (this.#fetchStrategy === FetchStrategy.LOCAL || this.#fetchStrategy === FetchStrategy.EVENTUALLY_LOCAL) {
+      if (this.includeFragment) {
+        this.includeFragment.refetch()
+        return
+      }
+
+      this.#updateItemVisibility()
+    }
+  }
+
+  #updateItemVisibility() {
+    if (!this.list) return
+
+    let atLeastOneResult = false
+
+    if (this.#performFilteringLocally()) {
+      const query = this.filterInputTextField?.value ?? ''
+      const filter = this.filterFn || this.#defaultFilterFn
+
+      for (const item of this.items) {
+        if (filter(item, query)) {
+          this.#showItem(item)
+          atLeastOneResult = true
+        } else {
+          this.#hideItem(item)
+        }
+      }
+    } else {
+      atLeastOneResult = this.items.length > 0
+    }
+
+    this.#updateTabIndices()
+    this.#maybeAnnounce()
+
+    for (const item of this.items) {
+      const itemContent = this.#getItemContent(item)
+      if (!itemContent) continue
+
+      const value = itemContent.getAttribute('data-value')
+
+      if (value && !this.#selectedItems.has(value) && this.isItemChecked(item)) {
+        this.#addSelectedItem(item)
+      }
+    }
+
+    if (!this.noResults) return
+
+    if (this.#inErrorState()) {
+      this.noResults.setAttribute('hidden', '')
+      return
+    }
+
+    if (atLeastOneResult) {
+      this.noResults.setAttribute('hidden', '')
+      // TODO can we change this to search for `@panelId-list`
+      this.list?.querySelector('.ActionListWrap')?.removeAttribute('hidden')
+    } else {
+      this.list?.querySelector('.ActionListWrap')?.setAttribute('hidden', '')
+      this.noResults.removeAttribute('hidden')
+    }
+  }
+
+  #inErrorState(): boolean {
+    if (this.fragmentErrorElement && !this.fragmentErrorElement.hasAttribute('hidden')) {
+      return true
+    }
+
+    return !this.bannerErrorElement.hasAttribute('hidden')
+  }
+
+  #setErrorState(type: ErrorStateType) {
+    let errorElement = this.fragmentErrorElement
+
+    if (type === ErrorStateType.BODY) {
+      this.fragmentErrorElement?.removeAttribute('hidden')
+      this.bannerErrorElement.setAttribute('hidden', '')
+    } else {
+      errorElement = this.bannerErrorElement
+      this.bannerErrorElement?.removeAttribute('hidden')
+      this.fragmentErrorElement?.setAttribute('hidden', '')
+    }
+
+    // check if the errorElement is visible in the dom
+    if (errorElement && !errorElement.hasAttribute('hidden')) {
+      announceFromElement(errorElement, {element: this.ariaLiveContainer, assertive: true})
+      return
+    }
+  }
+
+  #clearErrorState() {
+    this.fragmentErrorElement?.setAttribute('hidden', '')
+    this.bannerErrorElement.setAttribute('hidden', '')
+  }
+
+  #maybeAnnounce() {
+    if (this.open && this.list) {
+      const items = this.items
+
+      if (items.length > 0) {
+        const instructions = 'tab for results'
+        announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}`, {
+          element: this.ariaLiveContainer,
+        })
+      } else {
+        const noResultsEl = this.noResults
+        if (noResultsEl) {
+          announceFromElement(noResultsEl, {element: this.ariaLiveContainer})
+        }
+      }
+    }
+  }
+
+  get #fetchStrategy(): FetchStrategy {
+    if (!this.list) return FetchStrategy.REMOTE
+
+    switch (this.list.getAttribute('data-fetch-strategy')) {
+      case 'local':
+        return FetchStrategy.LOCAL
+      case 'eventually_local':
+        return FetchStrategy.EVENTUALLY_LOCAL
+      default:
+        return FetchStrategy.REMOTE
+    }
+  }
+
+  get #filterInputTextFieldElement(): PrimerTextFieldElement {
+    return this.filterInputTextField.closest('primer-text-field') as PrimerTextFieldElement
+  }
+
+  #performFilteringLocally(): boolean {
+    return this.#fetchStrategy === FetchStrategy.LOCAL || this.#fetchStrategy === FetchStrategy.EVENTUALLY_LOCAL
+  }
+
+  #handleInvokerActivated(event: Event) {
+    event.preventDefault()
+
+    // eslint-disable-next-line no-restricted-syntax
+    event.stopPropagation()
+
+    if (this.open) {
+      this.hide()
+    } else {
+      this.show()
+    }
+  }
+
+  #handleDialogItemActivated(event: Event, dialog: HTMLElement) {
+    this.querySelector<HTMLElement>('.ActionListWrap')!.style.display = 'none'
+    const dialog_controller = new AbortController()
+    const {signal} = dialog_controller
+    const handleDialogClose = () => {
+      dialog_controller.abort()
+      this.querySelector<HTMLElement>('.ActionListWrap')!.style.display = ''
+      if (this.open) {
+        this.hide()
+      }
+      const activeElement = this.ownerDocument.activeElement
+      const lostFocus = this.ownerDocument.activeElement === this.ownerDocument.body
+      const focusInClosedMenu = this.contains(activeElement)
+      if (lostFocus || focusInClosedMenu) {
+        setTimeout(() => this.invokerElement?.focus(), 0)
+      }
+    }
+    // a modal <dialog> element will close all popovers
+    dialog.addEventListener('close', handleDialogClose, {signal})
+    dialog.addEventListener('cancel', handleDialogClose, {signal})
+  }
+
+  #handleItemActivated(item: SelectPanelItem) {
+    // Hide popover after current event loop to prevent changes in focus from
+    // altering the target of the event. Not doing this specifically affects
+    // <a> tags. It causes the event to be sent to the currently focused element
+    // instead of the anchor, which effectively prevents navigation, i.e. it
+    // appears as if hitting enter does nothing. Curiously, clicking instead
+    // works fine.
+    if (this.selectVariant !== 'multiple') {
+      setTimeout(() => {
+        if (this.open) {
+          this.hide()
+        }
+      })
+    }
+
+    // The rest of the code below deals with single/multiple selection behavior, and should not
+    // interfere with events fired by menu items whose behavior is specified outside the library.
+    if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single') return
+
+    const checked = !this.isItemChecked(item)
+
+    const activationSuccess = this.dispatchEvent(
+      new CustomEvent('beforeItemActivated', {
+        bubbles: true,
+        detail: {item, checked},
+        cancelable: true,
+      }),
+    )
+
+    if (!activationSuccess) return
+
+    const itemContent = this.#getItemContent(item)
+
+    if (this.selectVariant === 'single') {
+      // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
+      if (checked) {
+        this.#addSelectedItem(item)
+        itemContent?.setAttribute(this.ariaSelectionType, 'true')
+      }
+
+      for (const checkedItem of this.querySelectorAll(`[${this.ariaSelectionType}]`)) {
+        if (checkedItem !== itemContent) {
+          this.#removeSelectedItem(checkedItem)
+          checkedItem.setAttribute(this.ariaSelectionType, 'false')
+        }
+      }
+
+      this.#setDynamicLabel()
+    } else {
+      // multi-select mode allows unchecking a checked item
+      itemContent?.setAttribute(this.ariaSelectionType, `${checked}`)
+
+      if (checked) {
+        this.#addSelectedItem(item)
+      } else {
+        this.#removeSelectedItem(item)
+      }
+    }
+
+    this.#updateInput()
+    this.#updateTabIndices()
+
+    this.dispatchEvent(
+      new CustomEvent('itemActivated', {
+        bubbles: true,
+        detail: {item, checked},
+      }),
+    )
+  }
+
+  show() {
+    this.updateAnchorPosition()
+    this.dialog.showModal()
+    const event = new CustomEvent('dialog:open', {
+      detail: {dialog: this.dialog},
+    })
+    this.dispatchEvent(event)
+  }
+
+  hide() {
+    this.dialog.close()
+  }
+
+  #setDynamicLabel() {
+    if (!this.dynamicLabel) return
+    const invokerLabel = this.invokerLabel
+    if (!invokerLabel) return
+    this.#originalLabel ||= invokerLabel.textContent || ''
+    const itemLabel =
+      this.querySelector(`[${this.ariaSelectionType}=true] .ActionListItem-label`)?.textContent || this.#originalLabel
+    if (itemLabel) {
+      const prefixSpan = document.createElement('span')
+      prefixSpan.classList.add('color-fg-muted')
+      const contentSpan = document.createElement('span')
+      prefixSpan.textContent = `${this.dynamicLabelPrefix} `
+      contentSpan.textContent = itemLabel
+      invokerLabel.replaceChildren(prefixSpan, contentSpan)
+
+      if (this.dynamicAriaLabelPrefix) {
+        this.invokerElement?.setAttribute('aria-label', `${this.dynamicAriaLabelPrefix} ${itemLabel.trim()}`)
+      }
+    } else {
+      invokerLabel.textContent = this.#originalLabel
+    }
+  }
+
+  #updateInput() {
+    if (this.selectVariant === 'single') {
+      const input = this.querySelector(`[data-list-inputs=true] input`) as HTMLInputElement
+      if (!input) return
+
+      const selectedItem = this.selectedItems[0]
+
+      if (selectedItem) {
+        input.value = (selectedItem.value || selectedItem.label || '').trim()
+        if (selectedItem.inputName) input.name = selectedItem.inputName
+        input.removeAttribute('disabled')
+      } else {
+        input.setAttribute('disabled', 'disabled')
+      }
+    } else if (this.selectVariant !== 'none') {
+      // multiple select variant
+      const inputList = this.querySelector('[data-list-inputs=true]')
+      if (!inputList) return
+
+      const inputs = inputList.querySelectorAll('input')
+
+      if (inputs.length > 0) {
+        this.#inputName ||= (inputs[0] as HTMLInputElement).name
+      }
+
+      for (const selectedItem of this.selectedItems) {
+        const newInput = document.createElement('input')
+        newInput.setAttribute('data-list-input', 'true')
+        newInput.type = 'hidden'
+        newInput.autocomplete = 'off'
+        newInput.name = selectedItem.inputName || this.#inputName
+        newInput.value = (selectedItem.value || selectedItem.label || '').trim()
+
+        inputList.append(newInput)
+      }
+
+      for (const input of inputs) {
+        input.remove()
+      }
+    }
+  }
+
+  get #firstItem(): SelectPanelItem | null {
+    return (this.querySelector(visibleMenuItemSelectors)?.parentElement || null) as SelectPanelItem | null
+  }
+
+  get visibleItems(): SelectPanelItem[] {
+    return Array.from(this.querySelectorAll(visibleMenuItemSelectors)).map(
+      element => element.parentElement! as SelectPanelItem,
+    )
+  }
+
+  get items(): SelectPanelItem[] {
+    return Array.from(this.querySelectorAll(menuItemSelectors)).map(
+      element => element.parentElement! as SelectPanelItem,
+    )
+  }
+  get focusableItem(): HTMLElement | undefined {
+    for (const item of this.items) {
+      const itemContent = this.#getItemContent(item)
+      if (!itemContent) continue
+      if (itemContent.getAttribute('tabindex') === '0') {
+        return itemContent
+      }
+    }
+  }
+
+  getItemById(itemId: string): SelectPanelItem | null {
+    return this.querySelector(`li[data-item-id="${itemId}"`)
+  }
+
+  isItemDisabled(item: SelectPanelItem | null): boolean {
+    if (item) {
+      return item.classList.contains('ActionListItem--disabled')
+    } else {
+      return false
+    }
+  }
+
+  disableItem(item: SelectPanelItem | null) {
+    if (item) {
+      item.classList.add('ActionListItem--disabled')
+      this.#getItemContent(item)!.setAttribute('aria-disabled', 'true')
+    }
+  }
+
+  enableItem(item: SelectPanelItem | null) {
+    if (item) {
+      item.classList.remove('ActionListItem--disabled')
+      this.#getItemContent(item)!.removeAttribute('aria-disabled')
+    }
+  }
+
+  isItemHidden(item: SelectPanelItem | null): boolean {
+    if (item) {
+      return item.hasAttribute('hidden')
+    } else {
+      return false
+    }
+  }
+
+  #hideItem(item: SelectPanelItem | null) {
+    if (item) {
+      item.setAttribute('hidden', 'hidden')
+    }
+  }
+
+  #showItem(item: SelectPanelItem | null) {
+    if (item) {
+      item.removeAttribute('hidden')
+    }
+  }
+
+  isItemChecked(item: SelectPanelItem | null) {
+    if (item) {
+      return this.#getItemContent(item)!.getAttribute(this.ariaSelectionType) === 'true'
+    } else {
+      return false
+    }
+  }
+
+  checkItem(item: SelectPanelItem | null) {
+    if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
+      if (!this.isItemChecked(item)) {
+        this.#handleItemActivated(item)
+      }
+    }
+  }
+
+  uncheckItem(item: SelectPanelItem | null) {
+    if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
+      if (this.isItemChecked(item)) {
+        this.#handleItemActivated(item)
+      }
+    }
+  }
+
+  #getItemContent(item: SelectPanelItem): HTMLElement | null {
+    return item.querySelector('.ActionListContent')
+  }
+}
+
+if (!window.customElements.get('select-panel')) {
+  window.SelectPanelElement = SelectPanelElement
+  window.customElements.define('select-panel', SelectPanelElement)
+}
+
+declare global {
+  interface Window {
+    SelectPanelElement: typeof SelectPanelElement
+  }
+}