Re-add ModalDialogElement for dotcom

.changeset/metal-kids-dress.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Re-add ModalDialogElement for dotcom

app/components/primer/alpha/modal_dialog.ts

@@ -0,0 +1,204 @@
+/* NOTE: This web component exists to support the older Primer::Experimental::Dialog
+ * component in dotcom and should not be removed until all those instances have been
+ * migrated to Primer::Alpha::Dialog.
+ */
+
+import {focusTrap} from '@primer/behaviors'
+import {getFocusableChild} from '@primer/behaviors/utils'
+
+function focusIfNeeded(elem: HTMLElement | undefined | null) {
+  if (document.activeElement !== elem) {
+    elem?.focus()
+  }
+}
+
+const overlayStack: ModalDialogElement[] = []
+
+function clickHandler(event: Event) {
+  const target = event.target as HTMLElement
+  const button = target?.closest('button')
+
+  if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true') return
+
+  // If the user is clicking a valid dialog trigger
+  let dialogId = button?.getAttribute('data-show-dialog-id')
+  if (dialogId) {
+    event.stopPropagation()
+    const dialog = document.getElementById(dialogId)
+    if (dialog instanceof ModalDialogElement) {
+      dialog.openButton = button
+      dialog.show()
+      // A buttons default behaviour in some browsers it to send a pointer event
+      // If the behaviour is allowed through the dialog will be shown but then
+      // quickly hidden- as if it were never shown. This prevents that.
+      event.preventDefault()
+      return
+    }
+  }
+
+  if (!overlayStack.length) return
+
+  dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id')
+  if (dialogId) {
+    const dialog = document.getElementById(dialogId)
+    if (dialog instanceof ModalDialogElement) {
+      const dialogIndex = overlayStack.findIndex(ele => ele.id === dialogId)
+      overlayStack.splice(dialogIndex, 1)
+      dialog.close(button.hasAttribute('data-submit-dialog-id'))
+    }
+  }
+}
+
+function keydownHandler(event: Event) {
+  if (
+    !(event instanceof KeyboardEvent) ||
+    event.type !== 'keydown' ||
+    event.key !== 'Enter' ||
+    event.ctrlKey ||
+    event.altKey ||
+    event.metaKey ||
+    event.shiftKey
+  )
+    return
+
+  clickHandler(event)
+}
+
+function mousedownHandler(event: Event) {
+  const target = event.target as HTMLElement
+  if (target?.closest('button')) return
+
+  // Find the top level dialog that is open.
+  const topLevelDialog = overlayStack[overlayStack.length - 1]
+  if (!topLevelDialog) return
+
+  // Check if the mousedown happened outside the boundary of the top level dialog
+  const mouseDownOutsideDialog = !target.closest(`#${topLevelDialog.getAttribute('id')}`)
+
+  // Only close dialog if it's a click outside the dialog and the dialog has a button?
+  if (mouseDownOutsideDialog) {
+    target.ownerDocument.addEventListener(
+      'mouseup',
+      (upEvent: Event) => {
+        if (upEvent.target === target) {
+          overlayStack.pop()
+          topLevelDialog.close()
+        }
+      },
+      {once: true},
+    )
+  }
+}
+
+export class ModalDialogElement extends HTMLElement {
+  //TODO: Do we remove the abortController from focusTrap?
+  #focusAbortController = new AbortController()
+  openButton: HTMLButtonElement | null
+
+  get open() {
+    return this.hasAttribute('open')
+  }
+  set open(value: boolean) {
+    if (value) {
+      if (this.open) return
+      this.setAttribute('open', '')
+      this.setAttribute('aria-disabled', 'false')
+      document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`
+      document.body.style.overflow = 'hidden'
+      this.#overlayBackdrop?.classList.remove('Overlay--hidden')
+      if (this.#focusAbortController.signal.aborted) {
+        this.#focusAbortController = new AbortController()
+      }
+      focusTrap(this, this.querySelector('[autofocus]') as HTMLElement, this.#focusAbortController.signal)
+      overlayStack.push(this)
+    } else {
+      if (!this.open) return
+      this.removeAttribute('open')
+      this.setAttribute('aria-disabled', 'true')
+      this.#overlayBackdrop?.classList.add('Overlay--hidden')
+      document.body.style.paddingRight = '0'
+      document.body.style.overflow = 'initial'
+      this.#focusAbortController.abort()
+      // if #openButton is a child of a menu, we need to focus a suitable child of the menu
+      // element since it is expected for the menu to close on click
+      const menu = this.openButton?.closest('details') || this.openButton?.closest('action-menu')
+      if (menu) {
+        focusIfNeeded(getFocusableChild(menu))
+      } else {
+        focusIfNeeded(this.openButton)
+      }
+      this.openButton = null
+    }
+  }
+
+  get #overlayBackdrop(): HTMLElement | null {
+    if (this.parentElement?.hasAttribute('data-modal-dialog-overlay')) {
+      return this.parentElement
+    }
+
+    return null
+  }
+
+  get showButtons(): NodeList {
+    // Dialogs may also be opened from any arbitrary button with a matching show-dialog-id data attribute
+    return document.querySelectorAll(`button[data-show-dialog-id='${this.id}']`)
+  }
+
+  connectedCallback(): void {
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'dialog')
+
+    document.addEventListener('click', clickHandler)
+    document.addEventListener('keydown', keydownHandler)
+    document.addEventListener('mousedown', mousedownHandler)
+
+    this.addEventListener('keydown', e => this.#keydown(e))
+  }
+
+  show() {
+    this.open = true
+  }
+
+  close(closedNotCancelled = false) {
+    if (this.open === false) return
+    const eventType = closedNotCancelled ? 'close' : 'cancel'
+    const dialogEvent = new Event(eventType)
+    this.dispatchEvent(dialogEvent)
+    this.open = false
+  }
+
+  #keydown(event: Event) {
+    if (!(event instanceof KeyboardEvent)) return
+    if (event.isComposing) return
+    if (!this.open) return
+
+    switch (event.key) {
+      case 'Escape':
+        this.close()
+        event.preventDefault()
+        event.stopPropagation()
+        break
+      case 'Enter': {
+        const target = event.target as HTMLElement
+
+        if (target.getAttribute('data-close-dialog-id') === this.id) {
+          event.stopPropagation()
+        }
+        break
+      }
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    ModalDialogElement: typeof ModalDialogElement
+  }
+  interface HTMLElementTagNameMap {
+    'modal-dialog': ModalDialogElement
+  }
+}
+
+if (!window.customElements.get('modal-dialog')) {
+  window.ModalDialogElement = ModalDialogElement
+  window.customElements.define('modal-dialog', ModalDialogElement)
+}

app/components/primer/primer.ts

@@ -6,6 +6,7 @@ import './dialog_helper'
 import './focus_group'
 import './scrollable_region'
 import './alpha/image_crop'
+import './alpha/modal_dialog'
 import './beta/nav_list'
 import './beta/nav_list_group_element'
 import './alpha/segmented_control'