chore(dialog): remove dialog polyfill (VIV-1986) (#1932)

Remove dialog polyfill

libs/components/src/lib/dialog/definition.ts

@@ -1,12 +1,10 @@
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-//TODO::remove next line when removing the dialog polyfill
-import dialogPolyfillStyles from 'dialog-polyfill/dist/dialog-polyfill.css?inline';
 import { registerFactory } from '../../shared/design-system';
 import { iconRegistries } from '../icon/definition';
 import { buttonRegistries } from '../button/definition';
 import { elevationRegistries } from '../elevation/definition';
 import styles from './dialog.scss?inline';
-import { Dialog, isDialogSupported } from './dialog';
+import { Dialog } from './dialog';
 import { DialogTemplate as template } from './dialog.template';
 
 export type { IconPlacement } from './dialog';
@@ -20,7 +18,7 @@ export type { IconPlacement } from './dialog';
 export const dialogDefinition = Dialog.compose<FoundationElementDefinition>({
  baseName: 'dialog',
  template: template as any,
- styles: isDialogSupported ? [styles] : [styles, dialogPolyfillStyles],
+ styles,
 });
 
 /**

libs/components/src/lib/dialog/dialog.spec.ts

@@ -1,11 +1,24 @@
 import { axe, elementUpdated, fixture, getBaseElement } from '@vivid-nx/shared';
-import { FoundationElementRegistry } from '@microsoft/fast-foundation';
+import * as dialogPolyfill from 'dialog-polyfill';
+import {
+ FoundationElement,
+ FoundationElementRegistry,
+} from '@microsoft/fast-foundation';
 import { Dialog } from './dialog';
 import '.';
 import { dialogDefinition } from './definition';
 
 const COMPONENT_TAG = 'vwc-dialog';
 
+// Polyfill dialog element which is not supported in JSDOM
+const originalConnectedCallback = FoundationElement.prototype.connectedCallback;
+FoundationElement.prototype.connectedCallback = function () {
+ originalConnectedCallback.call(this);
+ this.shadowRoot!.querySelectorAll('dialog').forEach(
+ (dialogPolyfill as any).registerDialog
+ );
+};
+
 describe('vwc-dialog', () => {
  async function closeDialog() {
  element.close();

libs/components/src/lib/dialog/dialog.ts

@@ -2,22 +2,6 @@ import { applyMixins, FoundationElement } from '@microsoft/fast-foundation';
 import { attr, observable } from '@microsoft/fast-element';
 import { Localized } from '../../shared/patterns';
 
-// eslint-disable-next-line compat/compat
-export const isDialogSupported = Boolean(
- window.HTMLDialogElement && window.HTMLDialogElement.prototype.showModal
-);
-
-// Make sure we support Safari 14
-let dialogPolyfill: any;
-(async () => {
- if (!isDialogSupported) {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- delete window.HTMLDialogElement;
- dialogPolyfill = await import('dialog-polyfill');
- }
-})();
-
 /**
  * Types of icon placement
  *
@@ -98,11 +82,6 @@ export class Dialog extends FoundationElement {
  this.#dialogElement = this.shadowRoot!.querySelector(
  'dialog'
  ) as HTMLDialogElement;
- if (this.#dialogElement) {
- if (dialogPolyfill) {
- dialogPolyfill.registerDialog(this.#dialogElement);
- }
- }
  }
  return this.#dialogElement as HTMLDialogElement;
  }