refactor dialog-helper to use toggle events

.changeset/green-sloths-press.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Improve performance of Dialog element

app/components/primer/dialog_helper.ts

@@ -1,3 +1,31 @@
+import 'dialog-toggle-events-polyfill'
+
+function dialogBeforeToggleHandler(event: Event) {
+  const {target, newState} = event as ToggleEvent
+  if (!(target instanceof HTMLDialogElement)) return
+  if (newState !== 'open') return
+  const {body} = target.ownerDocument
+  body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - body.clientWidth}px`)
+}
+
+function dialogToggleHandler(event: Event) {
+  const {target, newState} = event as ToggleEvent
+  if (!(target instanceof HTMLDialogElement)) return
+  if (newState !== 'open') return
+  if (target.closest('dialog-helper')?.dialog !== target) return
+  // We don't want to show the Dialog component as non-modal
+  forceDialogToOpenAsModal(target)
+}
+
+function forceDialogToOpenAsModal(dialog: HTMLDialogElement) {
+  if (dialog.matches('[open]:not(:modal)')) {
+    // eslint-disable-next-line no-restricted-syntax
+    dialog.addEventListener('close', e => e.stopImmediatePropagation(), {once: true})
+    dialog.close()
+    dialog.showModal()
+  }
+}
+
 function dialogInvokerButtonHandler(event: Event) {
   const target = event.target as HTMLElement
   const button = target?.closest('button')
@@ -76,35 +104,16 @@ export class DialogHelperElement extends HTMLElement {
     const {signal} = (this.#abortController = new AbortController())
     document.addEventListener('click', dialogInvokerButtonHandler, true)
     document.addEventListener('click', this, {signal})
-    this.ownerDocument.body.style.setProperty(
-      '--dialog-scrollgutter',
-      `${window.innerWidth - this.ownerDocument.body.clientWidth}px`,
-    )
-    new MutationObserver(records => {
-      for (const record of records) {
-        if (record.target === this.dialog) {
-          this.#handleDialogOpenAttribute()
-        }
-      }
-    }).observe(this, {subtree: true, attributeFilter: ['open']})
-    this.#handleDialogOpenAttribute()
+    document.addEventListener('beforetoggle', dialogBeforeToggleHandler, true)
+    document.addEventListener('toggle', dialogToggleHandler, true)
+    const {dialog} = this
+    if (dialog?.open) forceDialogToOpenAsModal(dialog)
   }
 
   disconnectedCallback() {
     this.#abortController?.abort()
   }
 
-  #handleDialogOpenAttribute() {
-    if (!this.dialog) return
-    // We don't want to show the Dialog component as non-modal
-    if (this.dialog.matches('[open]:not(:modal)')) {
-      // eslint-disable-next-line no-restricted-syntax
-      this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), {once: true})
-      this.dialog.close()
-      this.dialog.showModal()
-    }
-  }
-
   handleEvent(event: MouseEvent) {
     const target = event.target as HTMLElement
     const dialog = this.dialog

package.json

@@ -53,9 +53,10 @@
     "@github/relative-time-element": "^4.0.0",
     "@github/remote-input-element": "^0.4.0",
     "@github/tab-container-element": "^3.1.2",
-    "@primer/live-region-element": "^0.7.1",
     "@oddbird/popover-polyfill": "^0.5.2",
-    "@primer/behaviors": "^1.3.4"
+    "@primer/behaviors": "^1.3.4",
+    "@primer/live-region-element": "^0.7.1",
+    "dialog-toggle-events-polyfill": "^1.0.1"
   },
   "peerDependencies": {
     "@primer/primitives": "9.x || 10.x"